Skip to content

J
jinfa-platform
Commit f3e76fca authored by 卢均锐's avatar 卢均锐
Browse files
Options

chore: 采购竞价 输入框验证整合代码

parent 489574eb
Hide whitespace changes
Inline Side-by-side
Showing with 594 additions and 645 deletions
src/pages/transaction/purchaseAbility/purchaseBid/components/submitResultModal/index.tsx
View file @ f3e76fca
......@@ -5,132 +5,128 @@ import { UploadOutlined, DeleteOutlined, LinkOutlined } from '@ant-design/icons'
import { getAuth } from '@/utils/auth'
import { validatorByte } from '../../validator';
import styles from './index.less';
interface SubmitResultModalProps {
title: string,
visible: boolean,
onCancel: () => void,
onOk: (signUpIdea: string, urls: any) => void,
confirmLoading: boolean
title: string,
visible: boolean,
onCancel: () => void,
onOk: (signUpIdea: string, urls: any) => void,
confirmLoading: boolean
}
const SubmitResultModal: React.FC<SubmitResultModalProps> = (props: any) => {
const { title, visible, onCancel, onOk, confirmLoading } = props;
const [form] = Form.useForm();
const [files, setFiles] = useState([]);
const [loading, setloading] = useState(false);
const { token } = getAuth() || {}
const { title, visible, onCancel, onOk, confirmLoading } = props;
const [form] = Form.useForm();
const [files, setFiles] = useState([]);
const [loading, setloading] = useState(false);
const { token } = getAuth() || {}
/**判断文件类型和大小 */
const beforeDocUpload = (file: any) => {
const isLt20M = file.size / 1024 / 1024 < 20;
if (!isLt20M) {
message.error('上传文件大小不超过 20M!');
}
return isLt20M;
}
// 上传回调
const handleChange = ({ file }) => {
const arr: any = files;
setloading(true);
if (file.response) {
if (file.response.code === 1000) {
arr.push({
name: file.name,
url: file.response.data
})
setloading(false);
}
}
setFiles([...arr])
form.setFieldsValue({ upload: 'ok' })
/**判断文件类型和大小 */
const beforeDocUpload = (file: any) => {
const isLt20M = file.size / 1024 / 1024 < 20;
if (!isLt20M) {
message.error('上传文件大小不超过 20M!');
}
// 删除附件
const removeFiles = (index: any) => {
const arr = [...files];
arr.splice(index, 1);
setFiles(arr);
arr.length <= 0 && form.setFieldsValue({ upload: '' })
}
const formSubmit = () => {
form.validateFields().then(res => {
onOk && onOk(res.opinion, files);
return isLt20M;
}
// 上传回调
const handleChange = ({ file }) => {
const arr: any = files;
setloading(true);
if (file.response) {
if (file.response.code === 1000) {
arr.push({
name: file.name,
url: file.response.data
})
setloading(false);
}
}
setFiles([...arr])
form.setFieldsValue({ upload: 'ok' })
}
// 删除附件
const removeFiles = (index: any) => {
const arr = [...files];
arr.splice(index, 1);
setFiles(arr);
arr.length <= 0 && form.setFieldsValue({ upload: '' })
}
return (
<Modal
width={600}
title={title}
visible={visible}
onCancel={onCancel}
onOk={() => { formSubmit() }}
afterClose={() => {
form.resetFields()
setFiles([])
}}
confirmLoading={confirmLoading}
const formSubmit = () => {
form.validateFields().then(res => {
onOk && onOk(res.opinion, files);
})
}
return (
<Modal
width={600}
title={title}
visible={visible}
onCancel={onCancel}
onOk={() => { formSubmit() }}
afterClose={() => {
form.resetFields()
setFiles([])
}}
confirmLoading={confirmLoading}
>
<Form
form={form}
layout={'vertical'}
className={styles.revise_style}
>
<Form.Item
label='授标意见'
name='opinion'
rules={[
{ required: true, message: '请输入授标意见' },
{
validator: (r, v) => validatorByte(v, 200)
}
]}
>
<Form
form={form}
layout={'vertical'}
className={styles.revise_style}
>
<Form.Item
label='授标意见'
name='opinion'
rules={[
{ required: true, message: '请输入授标意见' }, () => ({
validator(_, value) {
let _str = value;
_str = _str.replace(/[\u4E00-\u9FA5]/g, "AA");
if (_str.length > 200) {
return Promise.reject(new Error('最长200个字符，100个汉字'));
} else {
return Promise.resolve();
}
},
})
]}
>
<Input.TextArea rows={3} maxLength={200} placeholder="最长200个字符，100个汉字" />
</Form.Item>
<Form.Item
label='附件'
name='upload'
rules={[{ required: true, message: '请上传附件' }]}>
<div className={styles.upload_data}>
{files.length > 0 && files.map((v, index) => (
<div key={index} className={styles.upload_item}>
<div className={styles.upload_left}>
<LinkOutlined />
<span>{v.name}</span>
</div>
<div className={styles.upload_right} onClick={() => removeFiles(index)}>
<DeleteOutlined />
</div>
</div>
))}
</div>
<Upload
action="/api/file/file/upload"
data={{ fileType: UPLOAD_TYPE }}
showUploadList={false}
accept='.doc,.docx,.pdf,.ppt,.pptx,.xls,.xlsx'
beforeUpload={beforeDocUpload}
onChange={handleChange}
headers={{ token }}
>
<Button loading={loading} icon={<UploadOutlined />}>上传文件</Button>
<div style={{ marginTop: '8px' }}>一次上传一个文件，每个附件大小不能超过 20M</div>
</Upload>
</Form.Item>
</Form>
</Modal>
)
<Input.TextArea rows={3} maxLength={200} placeholder="最长200个字符，100个汉字" />
</Form.Item>
<Form.Item
label='附件'
name='upload'
rules={[{ required: true, message: '请上传附件' }]}>
<div className={styles.upload_data}>
{files.length > 0 && files.map((v, index) => (
<div key={index} className={styles.upload_item}>
<div className={styles.upload_left}>
<LinkOutlined />
<span>{v.name}</span>
</div>
<div className={styles.upload_right} onClick={() => removeFiles(index)}>
<DeleteOutlined />
</div>
</div>
))}
</div>
<Upload
action="/api/file/file/upload"
data={{ fileType: UPLOAD_TYPE }}
showUploadList={false}
accept='.doc,.docx,.pdf,.ppt,.pptx,.xls,.xlsx'
beforeUpload={beforeDocUpload}
onChange={handleChange}
headers={{ token }}
>
<Button loading={loading} icon={<UploadOutlined />}>上传文件</Button>
<div style={{ marginTop: '8px' }}>一次上传一个文件，每个附件大小不能超过 20M</div>
</Upload>
</Form.Item>
</Form>
</Modal>
)
}
export default SubmitResultModal;
\ No newline at end of file
export default SubmitResultModal;
src/pages/transaction/purchaseAbility/purchaseBid/readyAdd/components/basic.tsx
View file @ f3e76fca
import React, { useState, useEffect } from 'react';
import {
Form,
Input,
Select,
Tooltip,
Row,
Col,
message,
Button,
Typography
Form,
Input,
Select,
Tooltip,
Row,
Col,
message,
Button,
Typography
} from 'antd';
import { QuestionCircleOutlined } from '@ant-design/icons';
import { PublicApi } from '@/services/api';
import { formatTimeString } from '@/utils'
import { validatorByte } from '../../validator';
import style from './index.less';
......@@ -22,307 +24,300 @@ import style from './index.less';
const { Option } = Select;
const { Text } = Typography;
const layout: any = {
colon: false,
labelCol: { style: { width: '174px' } },
wrapperCol: { span: 9 },
labelAlign: "left"
colon: false,
labelCol: { style: { width: '174px' } },
wrapperCol: { span: 9 },
labelAlign: "left"
}
interface Iprops {
currentRef: any,
fetchdata: any,
onBadge: (num: number, idx: number) => void
currentRef: any,
fetchdata: any,
onBadge: (num: number, idx: number) => void
}
const BasicInfo: React.FC<Iprops> = (props: any) => {
const { currentRef, fetchdata, onBadge } = props;
const [form] = Form.useForm();
/** 省列表 */
const [province, setprovince] = useState<any>([]);
/** 市列表 */
const [city, setcity] = useState<any>([]);
const [code, setcode] = useState<any>([]);
/** 适用城市储存列表 */
const [requisitionFormAddress, setrequisitionFormAddress] = useState<any>([{
provinceCode: '',
province: '',
cityCode: '',
city: ''
}]);
/** 获取所有地区 */
const manageProvince = () => {
return new Promise(resolve => {
PublicApi.getManageAreaAll().then(res => {
if (res.code === 1000) {
resolve(res.data);
}
})
})
}
/** 选择下拉得内容 */
const handProvince = async (val: any, idx: number, num: number) => {
const result = [...requisitionFormAddress];
const cityCode: Array<any> = []
result.forEach((item: any) => {
if (item.cityCode) {
cityCode.push(item.cityCode)
const { currentRef, fetchdata, onBadge } = props;
const [form] = Form.useForm();
/** 省列表 */
const [province, setprovince] = useState<any>([]);
/** 市列表 */
const [city, setcity] = useState<any>([]);
const [code, setcode] = useState<any>([]);
/** 适用城市储存列表 */
const [requisitionFormAddress, setrequisitionFormAddress] = useState<any>([{
provinceCode: '',
province: '',
cityCode: '',
city: ''
}]);
/** 获取所有地区 */
const manageProvince = () => {
return new Promise(resolve => {
PublicApi.getManageAreaAll().then(res => {
if (res.code === 1000) {
resolve(res.data);
}
})
})
}
/** 选择下拉得内容 */
const handProvince = async (val: any, idx: number, num: number) => {
const result = [...requisitionFormAddress];
const cityCode: Array<any> = []
result.forEach((item: any) => {
if (item.cityCode) {
cityCode.push(item.cityCode)
}
})
setcode([...cityCode]);
if (num === 1) {
await province.forEach(item => {
if (item.code === val) {
PublicApi.getManageAreaByPcodeAll({ pcode: val }).then((res: any) => {
if (res.code === 1000) {
result[idx].provinceCode = val;
result[idx].province = item.name;
city[idx] = { citydata: res.data }
setcity([...city])
}
})
setcode([...cityCode]);
if (num === 1) {
await province.forEach(item => {
if (item.code === val) {
PublicApi.getManageAreaByPcodeAll({ pcode: val }).then((res: any) => {
if (res.code === 1000) {
result[idx].provinceCode = val;
result[idx].province = item.name;
city[idx] = { citydata: res.data }
setcity([...city])
}
})
}
})
} else {
city.forEach(item => {
item.citydata.forEach(items => {
if (items.code === val) {
const cityCode = code.find(it => items.code);
if (cityCode !== items.code) {
items.disabled = false
}
result[idx].cityCode = val;
result[idx].city = items.name;
}
})
})
setcity([...city])
})
}
setrequisitionFormAddress(result);
})
} else {
city.forEach(item => {
item.citydata.forEach(items => {
if (items.code === val) {
const cityCode = code.find(it => items.code);
if (cityCode !== items.code) {
items.disabled = false
}
result[idx].cityCode = val;
result[idx].city = items.name;
}
})
})
setcity([...city])
}
/** 选择城市的时候下拉就调用方 */
const onDropdownVisibleChange = () => {
return new Promise(reslove => reslove(code)).then((res: any) => {
city.forEach((item: any) => {
item.citydata.filter(it => {
res.map(items => {
if (items === it.code) {
it.disabled = true
}
})
})
})
setcity([...city])
setrequisitionFormAddress(result);
}
/** 选择城市的时候下拉就调用方 */
const onDropdownVisibleChange = () => {
return new Promise(reslove => reslove(code)).then((res: any) => {
city.forEach((item: any) => {
item.citydata.filter(it => {
res.map(items => {
if (items === it.code) {
it.disabled = true
}
})
})
})
setcity([...city])
})
}
/** 添加一条地址 */
const addFormAddress = (idx: number) => {
const address: any = {
provinceCode: '',
province: '',
cityCode: '',
city: ''
}
if (requisitionFormAddress[idx].provinceCode && requisitionFormAddress[idx].cityCode) {
setrequisitionFormAddress([...requisitionFormAddress, address])
} else {
message.error('请完善适用城市信息')
}
/** 添加一条地址 */
const addFormAddress = (idx: number) => {
const address: any = {
provinceCode: '',
province: '',
cityCode: '',
city: ''
}
if (requisitionFormAddress[idx].provinceCode && requisitionFormAddress[idx].cityCode) {
setrequisitionFormAddress([...requisitionFormAddress, address])
} else {
message.error('请完善适用城市信息')
}
}
/** 删除一条地址 */
const removeFormAddress = (idx: any) => {
if (requisitionFormAddress.length > 1) {
const requisitionFormAddressFilter = requisitionFormAddress.filter((item: any, index: number) => index !== idx);
const cityFilter = city.filter((item: any, index: number) => index !== idx);
requisitionFormAddressFilter.forEach((item: any, index: number) => {
const cityCode = code.find(it => item.cityCode);
if (cityCode !== item.cityCode) {
item.disabled = false
}
form.setFieldsValue({
['province_' + index]: item.provinceCode,
['city_' + index]: item.cityCode
});
})
setcity(cityFilter);
setrequisitionFormAddress(requisitionFormAddressFilter);
}
/** 删除一条地址 */
const removeFormAddress = (idx: any) => {
if (requisitionFormAddress.length > 1) {
const requisitionFormAddressFilter = requisitionFormAddress.filter((item: any, index: number) => index !== idx);
const cityFilter = city.filter((item: any, index: number) => index !== idx);
requisitionFormAddressFilter.forEach((item: any, index: number) => {
const cityCode = code.find(it => item.cityCode);
if (cityCode !== item.cityCode) {
item.disabled = false
}
}
useEffect(() => {
manageProvince().then(data => {
setprovince(data)
})
}, [])
useEffect(() => {
if (Object.keys(fetchdata).length > 0) {
setrequisitionFormAddress([...fetchdata.areas]);
fetchdata.areas.forEach((item: any, index: number) => {
PublicApi.getManageAreaByPcodeAll({ pcode: item.provinceCode }).then((res: any) => {
if (res.code === 1000) {
const citydata = {
citydata: res.data
}
city[index] = { ...citydata }
Promise.resolve().then(() => {
setTimeout(() => {
setcity([...city])
setcode([...code, item.cityCode])
form.setFieldsValue({
['province_' + index]: item.provinceCode,
['city_' + index]: item.cityCode
details: fetchdata.details,
['province_' + index]: item.provinceCode,
['city_' + index]: item.cityCode,
});
})
setcity(cityFilter);
setrequisitionFormAddress(requisitionFormAddressFilter);
}
}, 350);
});
}
})
})
}
useEffect(() => {
manageProvince().then(data => {
setprovince(data)
}, [fetchdata])
useEffect(() => {
currentRef.current = {
get: () => new Promise((resolve: any) => {
form.validateFields().then(res => {
resolve({
state: true,
name: 'basic',
data: {
...res,
isAreas: 1,
areas: [...requisitionFormAddress],
},
})
onBadge(0, 0)
}).catch(error => {
if (error && error.errorFields) {
onBadge(error.errorFields.length, 0)
}
})
}, [])
useEffect(() => {
if (Object.keys(fetchdata).length > 0) {
setrequisitionFormAddress([...fetchdata.areas]);
fetchdata.areas.forEach((item: any, index: number) => {
PublicApi.getManageAreaByPcodeAll({ pcode: item.provinceCode }).then((res: any) => {
if (res.code === 1000) {
const citydata = {
citydata: res.data
}
city[index] = { ...citydata }
Promise.resolve().then(() => {
setTimeout(() => {
setcity([...city])
setcode([...code, item.cityCode])
form.setFieldsValue({
details: fetchdata.details,
['province_' + index]: item.provinceCode,
['city_' + index]: item.cityCode,
});
}, 350);
});
}
})
})
}
}, [fetchdata])
useEffect(() => {
currentRef.current = {
get: () => new Promise((resolve: any) => {
form.validateFields().then(res => {
resolve({
state: true,
name: 'basic',
data: {
...res,
isAreas : 1,
areas : [...requisitionFormAddress],
},
})
onBadge(0, 0)
}).catch(error => {
if (error && error.errorFields) {
onBadge(error.errorFields.length, 0)
}
})
})
}
}, [requisitionFormAddress])
return (
<>
<Form
{...layout}
form={form}
className={style.form}
>
<Form.Item
label='竞价单摘要'
name='details'
rules={[
{ required: true, message: '请输入竞价单摘要' }, () => ({
validator(_, value) {
let _str = value;
_str = _str.replace(/[\u4E00-\u9FA5]/g, "AA");
if (_str.length > 60) {
return Promise.reject(new Error('最长60个字符，30个汉字'));
} else {
return Promise.resolve();
}
},
})
]}
>
<Input maxLength={60} placeholder='最长60个字符，30个汉字' />
</Form.Item>
<Form.Item
label={<Tooltip placement="right" title='设置了归属地市后，此商品可根据地市进行筛选，未设置时默认为所有地市'>适用地市<QuestionCircleOutlined style={{ marginLeft: '5px' }} /></Tooltip>}
style={{ marginBottom: '0' }}
>
{requisitionFormAddress.map((item: any, idx: number) => {
})
}
}, [requisitionFormAddress])
return (
<>
<Form
{...layout}
form={form}
className={style.form}
>
<Form.Item
label='竞价单摘要'
name='details'
rules={[
{ required: true, message: '请输入竞价单摘要' },
{
validator: (r, v) => validatorByte(v, 60)
}
]}
>
<Input maxLength={60} placeholder='最长60个字符，30个汉字' />
</Form.Item>
<Form.Item
label={<Tooltip placement="right" title='设置了归属地市后，此商品可根据地市进行筛选，未设置时默认为所有地市'>适用地市<QuestionCircleOutlined style={{ marginLeft: '5px' }} /></Tooltip>}
style={{ marginBottom: '0' }}
>
{requisitionFormAddress.map((item: any, idx: number) => {
return (
<Row gutter={10} key={`requisitionFormAddress_${idx}_`} className={style.formwrap}>
<Col span={12}>
<Form.Item name={`province_${idx}`}>
<Select
onDropdownVisibleChange={onDropdownVisibleChange}
onChange={(value) => {
handProvince(value, idx, 1)
}}
placeholder='请选择省'
>
{province.map(items => {
return (
<Option key={`${items.id}_${idx}_province`} value={items.code}>{items.name}</Option>
)
})}
</Select>
</Form.Item>
</Col>
<Col span={12}>
<Form.Item
name={`city_${idx}`}
>
<Select
onDropdownVisibleChange={onDropdownVisibleChange}
onChange={(value) => {
handProvince(value, idx, 2)
}}
placeholder='请选择市'
>
{(item.provinceCode && city.length > 0 && city[idx]) && city[idx].citydata.map(items => {
return (
<Row gutter={10} key={`requisitionFormAddress_${idx}_`} className={style.formwrap}>
<Col span={12}>
<Form.Item name={`province_${idx}`}>
<Select
onDropdownVisibleChange={onDropdownVisibleChange}
onChange={(value) => {
handProvince(value, idx, 1)
}}
placeholder='请选择省'
>
{province.map(items => {
return (
<Option key={`${items.id}_${idx}_province`} value={items.code}>{items.name}</Option>
)
})}
</Select>
</Form.Item>
</Col>
<Col span={12}>
<Form.Item
name={`city_${idx}`}
>
<Select
onDropdownVisibleChange={onDropdownVisibleChange}
onChange={(value) => {
handProvince(value, idx, 2)
}}
placeholder='请选择市'
>
{(item.provinceCode && city.length > 0 && city[idx]) && city[idx].citydata.map(items => {
return (
<Option disabled={items.disabled} key={`${items.id}_${idx}_city`} value={items.code}>{items.name}</Option>
)
})}
</Select>
</Form.Item>
</Col>
<div className={style.formButton}>
{
(idx === requisitionFormAddress.length - 1) &&
<Form.Item>
<Button type='primary' onClick={() => addFormAddress(idx)}>+</Button>
</Form.Item>
}
{
requisitionFormAddress.length > 1 &&
<Form.Item>
<Button onClick={() => removeFormAddress(idx)}>-</Button>
</Form.Item>
}
</div>
</Row>
<Option disabled={items.disabled} key={`${items.id}_${idx}_city`} value={items.code}>{items.name}</Option>
)
})}
</Form.Item>
<Form.Item
label='会员名称'
name='memberName'
>
<Text strong>{(fetchdata && fetchdata.memberName) && fetchdata.memberName}</Text>
</Form.Item>
<Form.Item
label='单据时间'
name='createTime'
>
<Text strong>{(fetchdata && fetchdata.createTime) && formatTimeString(fetchdata.createTime)}</Text>
</Form.Item>
<Form.Item
label='竞价单号'
name='purchaseInquiryNo'
>
<Text strong>{(fetchdata && fetchdata.biddingNo) && fetchdata.biddingNo}</Text>
</Form.Item>
<Form.Item
label='外部状态'
name='externalState'
>
<Text type="warning" strong>{(fetchdata && fetchdata.externalState) && fetchdata.externalStateName}</Text>
</Form.Item>
<Form.Item
label='内部状态'
name='interiorState'
>
<Text type="warning" strong>{(fetchdata && fetchdata.interiorState) && fetchdata.interiorStateName}</Text>
</Form.Item>
</Form>
</>
)
})}
</Select>
</Form.Item>
</Col>
<div className={style.formButton}>
{
(idx === requisitionFormAddress.length - 1) &&
<Form.Item>
<Button type='primary' onClick={() => addFormAddress(idx)}>+</Button>
</Form.Item>
}
{
requisitionFormAddress.length > 1 &&
<Form.Item>
<Button onClick={() => removeFormAddress(idx)}>-</Button>
</Form.Item>
}
</div>
</Row>
)
})}
</Form.Item>
<Form.Item
label='会员名称'
name='memberName'
>
<Text strong>{(fetchdata && fetchdata.memberName) && fetchdata.memberName}</Text>
</Form.Item>
<Form.Item
label='单据时间'
name='createTime'
>
<Text strong>{(fetchdata && fetchdata.createTime) && formatTimeString(fetchdata.createTime)}</Text>
</Form.Item>
<Form.Item
label='竞价单号'
name='purchaseInquiryNo'
>
<Text strong>{(fetchdata && fetchdata.biddingNo) && fetchdata.biddingNo}</Text>
</Form.Item>
<Form.Item
label='外部状态'
name='externalState'
>
<Text type="warning" strong>{(fetchdata && fetchdata.externalState) && fetchdata.externalStateName}</Text>
</Form.Item>
<Form.Item
label='内部状态'
name='interiorState'
>
<Text type="warning" strong>{(fetchdata && fetchdata.interiorState) && fetchdata.interiorStateName}</Text>
</Form.Item>
</Form>
</>
)
}
export default BasicInfo
src/pages/transaction/purchaseAbility/purchaseBid/readyAdd/components/bidRequirement.tsx
View file @ f3e76fca
import React, { useState, useEffect } from 'react';
import {
Form,
Input,
message,
Button,
DatePicker,
Upload,
Form,
Input,
message,
Button,
DatePicker,
Upload,
} from 'antd';
import { UploadOutlined, DeleteOutlined, LinkOutlined } from '@ant-design/icons';
import moment from 'moment';
......@@ -13,186 +13,181 @@ import moment from 'moment';
import { UPLOAD_TYPE } from '@/constants'
import { getAuth } from '@/utils/auth'
import { validatorByte } from '../../validator';
import styles from './index.less';
const { TextArea } = Input;
const layout: any = {
colon: false,
labelCol: { style: { width: '174px' } },
wrapperCol: { span: 9 },
labelAlign: "left"
colon: false,
labelCol: { style: { width: '174px' } },
wrapperCol: { span: 9 },
labelAlign: "left"
}
interface Iprops {
currentRef: any,
fetchdata: any,
onBadge: (num: number, idx: number) => void,
exRef: any
currentRef: any,
fetchdata: any,
onBadge: (num: number, idx: number) => void,
exRef: any
}
const BidRequirement: React.FC<Iprops> = (props: any) => {
const { currentRef, fetchdata, onBadge, exRef } = props;
const [files, setFiles] = useState<any>([]);
const [loading, setloading] = useState(false);
const [form] = Form.useForm();
const { token } = getAuth() || {}
const { currentRef, fetchdata, onBadge, exRef } = props;
const [files, setFiles] = useState<any>([]);
const [loading, setloading] = useState(false);
const [form] = Form.useForm();
const { token } = getAuth() || {}
useEffect(() => {
currentRef.current = {
get: () => new Promise((resolve: any) => {
form.validateFields().then(res => {
let _formData = { ...res };
resolve({
state: true,
name: 'requirement',
data: {
startSignUp: moment(_formData.signUpTime[0]).format('x'),
endSignUp: moment(_formData.signUpTime[1]).format('x'),
demand: _formData.demand,
demandUrls: files
},
})
onBadge(0, 3)
}).catch(error => {
if (error && error.errorFields) {
onBadge(error.errorFields.length, 3)
}
})
}),
signUpTime: () => form.getFieldValue('signUpTime')
}
})
useEffect(() => {
fetchdata.demandUrls && setFiles([...fetchdata.demandUrls])
form.setFieldsValue({
signUpTime: [fetchdata.startSignUp ? moment(fetchdata.startSignUp) : '', fetchdata.endSignUp ? moment(fetchdata.endSignUp) : ''],
demand: fetchdata.demand,
demandUrls: fetchdata.demandUrls
useEffect(() => {
currentRef.current = {
get: () => new Promise((resolve: any) => {
form.validateFields().then(res => {
let _formData = { ...res };
resolve({
state: true,
name: 'requirement',
data: {
startSignUp: moment(_formData.signUpTime[0]).format('x'),
endSignUp: moment(_formData.signUpTime[1]).format('x'),
demand: _formData.demand,
demandUrls: files
},
})
onBadge(0, 3)
}).catch(error => {
if (error && error.errorFields) {
onBadge(error.errorFields.length, 3)
}
})
}, [fetchdata])
}),
signUpTime: () => form.getFieldValue('signUpTime')
}
})
useEffect(() => {
fetchdata.demandUrls && setFiles([...fetchdata.demandUrls])
form.setFieldsValue({
signUpTime: [fetchdata.startSignUp ? moment(fetchdata.startSignUp) : '', fetchdata.endSignUp ? moment(fetchdata.endSignUp) : ''],
demand: fetchdata.demand,
demandUrls: fetchdata.demandUrls
})
}, [fetchdata])
/**判断文件类型和大小 */
const beforeDocUpload = (file: any) => {
const isLt20M = file.size / 1024 / 1024 < 20;
if (!isLt20M) {
message.error('上传文件大小不超过 20M!');
}
return isLt20M;
/**判断文件类型和大小 */
const beforeDocUpload = (file: any) => {
const isLt20M = file.size / 1024 / 1024 < 20;
if (!isLt20M) {
message.error('上传文件大小不超过 20M!');
}
// 上传回调
const handleChange = ({ file }) => {
const arr: any = files;
setloading(true);
if (file.response) {
if (file.response.code === 1000) {
arr.push({
name: file.name,
url: file.response.data
})
setloading(false);
}
}
setFiles([...arr])
form.setFieldsValue({ demandUrls: [...arr] })
return isLt20M;
}
// 上传回调
const handleChange = ({ file }) => {
const arr: any = files;
setloading(true);
if (file.response) {
if (file.response.code === 1000) {
arr.push({
name: file.name,
url: file.response.data
})
setloading(false);
}
}
setFiles([...arr])
form.setFieldsValue({ demandUrls: [...arr] })
}
// 删除附件
const removeFiles = (index: any) => {
const arr = [...files];
arr.splice(index, 1);
setFiles(arr);
form.setFieldsValue({ demandUrls: [...arr] })
}
// 删除附件
const removeFiles = (index: any) => {
const arr = [...files];
arr.splice(index, 1);
setFiles(arr);
form.setFieldsValue({ demandUrls: [...arr] })
}
return (
<>
<Form
{...layout}
form={form}
className={styles.revise_style}
>
<Form.Item
label='报名要求时间'
name='signUpTime'
rules={[
{ required: true, message: '请选择报名要求时间' }, () => ({
async validator(_, value) {
let _exVal = await exRef.current.biddingTime();
if (_exVal[0] && moment(value[1]).isAfter(_exVal[0])) {
return Promise.reject(new Error('报名结束需要早于竞价开始时间'));
}
if (!value[0] || !value[1]) {
return Promise.reject(new Error('请选择报名要求时间'));
} else {
return Promise.resolve();
}
},
})
]}
>
<DatePicker.RangePicker
showTime
format="YYYY-MM-DD HH:mm:ss"
placeholder={['开始时间', '结束时间']}
disabledDate={(current) => {
return current && current < moment().startOf('second')
}} />
</Form.Item>
<Form.Item
label="报名要求"
name="demand"
rules={[
{ required: true, message: '请输入报名要求' }, () => ({
validator(_, value) {
let _str = value;
_str = _str.replace(/[\u4E00-\u9FA5]/g, "AA");
if (_str.length > 200) {
return Promise.reject(new Error('最长200个字符，100个汉字'));
} else {
return Promise.resolve();
}
},
})
]}
>
<TextArea rows={3} maxLength={200} placeholder="最长200个字符，100个汉字" />
</Form.Item>
<Form.Item
label="报名要求附件"
name="demandUrls"
rules={[{ required: true, message: '请上传报名要求附件' }]}
>
<div className={styles.upload_data}>
{files.length > 0 && files.map((v, index) => (
<div key={index} className={styles.upload_item}>
<a className={styles.upload_left} href={v.url} target='_blank'>
<LinkOutlined />
<span>{v.name}</span>
</a>
<div className={styles.upload_right} onClick={() => removeFiles(index)}>
<DeleteOutlined />
</div>
</div>
))}
</div>
<Upload
action="/api/file/file/upload"
data={{ fileType: UPLOAD_TYPE }}
showUploadList={false}
accept='.doc,.docx,.pdf,.ppt,.pptx,.xls,.xlsx'
beforeUpload={beforeDocUpload}
onChange={handleChange}
headers={{ token }}
>
<Button loading={loading} icon={<UploadOutlined />}>上传文件</Button>
<div style={{ marginTop: '8px' }}>一次上传一个文件，每个附件大小不能超过 20M</div>
</Upload>
</Form.Item>
</Form>
</>
)
return (
<>
<Form
{...layout}
form={form}
className={styles.revise_style}
>
<Form.Item
label='报名要求时间'
name='signUpTime'
rules={[
{ required: true, message: '请选择报名要求时间' }, () => ({
async validator(_, value) {
let _exVal = await exRef.current.biddingTime();
if (_exVal[0] && moment(value[1]).isAfter(_exVal[0])) {
return Promise.reject(new Error('报名结束需要早于竞价开始时间'));
}
if (!value[0] || !value[1]) {
return Promise.reject(new Error('请选择报名要求时间'));
} else {
return Promise.resolve();
}
},
})
]}
>
<DatePicker.RangePicker
showTime
format="YYYY-MM-DD HH:mm:ss"
placeholder={['开始时间', '结束时间']}
disabledDate={(current) => {
return current && current < moment().startOf('second')
}} />
</Form.Item>
<Form.Item
label="报名要求"
name="demand"
rules={[
{ required: true, message: '请输入报名要求' },
{
validator: (r, v) => validatorByte(v, 200)
}
]}
>
<TextArea rows={3} maxLength={200} placeholder="最长200个字符，100个汉字" />
</Form.Item>
<Form.Item
label="报名要求附件"
name="demandUrls"
rules={[{ required: true, message: '请上传报名要求附件' }]}
>
<div className={styles.upload_data}>
{files.length > 0 && files.map((v, index) => (
<div key={index} className={styles.upload_item}>
<a className={styles.upload_left} href={v.url} target='_blank'>
<LinkOutlined />
<span>{v.name}</span>
</a>
<div className={styles.upload_right} onClick={() => removeFiles(index)}>
<DeleteOutlined />
</div>
</div>
))}
</div>
<Upload
action="/api/file/file/upload"
data={{ fileType: UPLOAD_TYPE }}
showUploadList={false}
accept='.doc,.docx,.pdf,.ppt,.pptx,.xls,.xlsx'
beforeUpload={beforeDocUpload}
onChange={handleChange}
headers={{ token }}
>
<Button loading={loading} icon={<UploadOutlined />}>上传文件</Button>
<div style={{ marginTop: '8px' }}>一次上传一个文件，每个附件大小不能超过 20M</div>
</Upload>
</Form.Item>
</Form>
</>
)
}
export default BidRequirement
src/pages/transaction/purchaseAbility/purchaseBid/readyAdd/components/condition.tsx
View file @ f3e76fca
import React, { useState, useEffect } from 'react';
import { Form, Row, Col, Input, DatePicker, Select } from 'antd';
import { Form, Input, DatePicker, Select } from 'antd';
import moment from 'moment';
import { PublicApi } from '@/services/api';
import { validatorByte } from '../../validator';
import style from './index.less';
const { TextArea } = Input;
......@@ -143,17 +145,10 @@ const Condition: React.FC<Iprops> = (props: any) => {
label="报价要求"
name="offer"
rules={[
{ required: true, message: '请输入报价要求' }, () => ({
validator(_, value) {
let _str = value;
_str = _str.replace(/[\u4E00-\u9FA5]/g, "AA");
if (_str.length > 100) {
return Promise.reject(new Error('最长100个字符，50个汉字'));
} else {
return Promise.resolve();
}
},
})
{ required: true, message: '请输入报价要求' },
{
validator: (r, v) => validatorByte(v, 100)
}
]}
>
<TextArea rows={3} maxLength={100} placeholder="最长100个字符，50个汉字" />
......@@ -162,19 +157,11 @@ const Condition: React.FC<Iprops> = (props: any) => {
label="付款方式"
name="paymentType"
rules={[
{ required: true, message: '请输入付款方式' }, () => ({
validator(_, value) {
let _str = value;
_str = _str.replace(/[\u4E00-\u9FA5]/g, "AA");
if (_str.length > 100) {
return Promise.reject(new Error('最长100个字符，50个汉字'));
} else {
return Promise.resolve();
}
},
})
{ required: true, message: '请输入付款方式' },
{
validator: (r, v) => validatorByte(v, 100)
}
]}
>
<TextArea rows={3} maxLength={100} placeholder="最长100个字符，50个汉字" />
</Form.Item>
......@@ -182,19 +169,11 @@ const Condition: React.FC<Iprops> = (props: any) => {
label="税费要求"
name="taxes"
rules={[
{ required: true, message: '请输入税费要求' }, () => ({
validator(_, value) {
let _str = value;
_str = _str.replace(/[\u4E00-\u9FA5]/g, "AA");
if (_str.length > 100) {
return Promise.reject(new Error('最长100个字符，50个汉字'));
} else {
return Promise.resolve();
}
},
})
{ required: true, message: '请输入税费要求' },
{
validator: (r, v) => validatorByte(v, 100)
}
]}
>
<TextArea rows={3} maxLength={100} placeholder="最长100个字符，50个汉字" />
</Form.Item>
......@@ -202,19 +181,11 @@ const Condition: React.FC<Iprops> = (props: any) => {
label="物流要求"
name="logistics"
rules={[
{ required: true, message: '请输入物流要求' }, () => ({
validator(_, value) {
let _str = value;
_str = _str.replace(/[\u4E00-\u9FA5]/g, "AA");
if (_str.length > 100) {
return Promise.reject(new Error('最长100个字符，50个汉字'));
} else {
return Promise.resolve();
}
},
})
{ required: true, message: '请输入物流要求' },
{
validator: (r, v) => validatorByte(v, 100)
}
]}
>
<TextArea rows={3} maxLength={100} placeholder="最长100个字符，50个汉字" />
</Form.Item>
......@@ -222,19 +193,11 @@ const Condition: React.FC<Iprops> = (props: any) => {
label="包装要求"
name="packRequire"
rules={[
{ required: true, message: '请输入包装要求' }, () => ({
validator(_, value) {
let _str = value;
_str = _str.replace(/[\u4E00-\u9FA5]/g, "AA");
if (_str.length > 100) {
return Promise.reject(new Error('最长100个字符，50个汉字'));
} else {
return Promise.resolve();
}
},
})
{ required: true, message: '请输入包装要求' },
{
validator: (r, v) => validatorByte(v, 100)
}
]}
>
<TextArea rows={3} maxLength={100} placeholder="最长100个字符，50个汉字" />
</Form.Item>
......@@ -242,19 +205,11 @@ const Condition: React.FC<Iprops> = (props: any) => {
label="其他要求"
name="otherRequire"
rules={[
{ required: true, message: '请输入其他要求' }, () => ({
validator(_, value) {
let _str = value;
_str = _str.replace(/[\u4E00-\u9FA5]/g, "AA");
if (_str.length > 100) {
return Promise.reject(new Error('最长100个字符，50个汉字'));
} else {
return Promise.resolve();
}
},
})
{ required: true, message: '请输入其他要求' },
{
validator: (r, v) => validatorByte(v, 100)
}
]}
>
<TextArea rows={3} maxLength={100} placeholder="最长100个字符，50个汉字" />
</Form.Item>
......
src/pages/transaction/purchaseAbility/purchaseBid/validator/index.ts 0 → 100644
View file @ f3e76fca
export const validatorByte = (value: any, limitNumber: number) => {
let _str = value;
_str = _str.replace(/[\u4E00-\u9FA5]/g, "AA");
if (_str.length > limitNumber) {
return Promise.reject(new Error(`最长${limitNumber}个字符，${limitNumber/2}个汉字`));
} else {
return Promise.resolve();
}
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment