Skip to content

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

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

parent 489574eb
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 146 additions and 187 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' ...@@ -5,132 +5,128 @@ import { UploadOutlined, DeleteOutlined, LinkOutlined } from '@ant-design/icons'
import { getAuth } from '@/utils/auth' import { getAuth } from '@/utils/auth'
import { validatorByte } from '../../validator';
import styles from './index.less'; import styles from './index.less';
interface SubmitResultModalProps { interface SubmitResultModalProps {
title: string, title: string,
visible: boolean, visible: boolean,
onCancel: () => void, onCancel: () => void,
onOk: (signUpIdea: string, urls: any) => void, onOk: (signUpIdea: string, urls: any) => void,
confirmLoading: boolean confirmLoading: boolean
} }
const SubmitResultModal: React.FC<SubmitResultModalProps> = (props: any) => { const SubmitResultModal: React.FC<SubmitResultModalProps> = (props: any) => {
const { title, visible, onCancel, onOk, confirmLoading } = props; const { title, visible, onCancel, onOk, confirmLoading } = props;
const [form] = Form.useForm(); const [form] = Form.useForm();
const [files, setFiles] = useState([]); const [files, setFiles] = useState([]);
const [loading, setloading] = useState(false); const [loading, setloading] = useState(false);
const { token } = getAuth() || {} const { token } = getAuth() || {}
/**判断文件类型和大小 */ /**判断文件类型和大小 */
const beforeDocUpload = (file: any) => { const beforeDocUpload = (file: any) => {
const isLt20M = file.size / 1024 / 1024 < 20; const isLt20M = file.size / 1024 / 1024 < 20;
if (!isLt20M) { if (!isLt20M) {
message.error('上传文件大小不超过 20M!'); 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' })
} }
// 删除附件 return isLt20M;
const removeFiles = (index: any) => { }
const arr = [...files]; // 上传回调
arr.splice(index, 1); const handleChange = ({ file }) => {
setFiles(arr); const arr: any = files;
arr.length <= 0 && form.setFieldsValue({ upload: '' }) setloading(true);
} if (file.response) {
if (file.response.code === 1000) {
const formSubmit = () => { arr.push({
form.validateFields().then(res => { name: file.name,
onOk && onOk(res.opinion, files); 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 ( const formSubmit = () => {
<Modal form.validateFields().then(res => {
width={600} onOk && onOk(res.opinion, files);
title={title} })
visible={visible} }
onCancel={onCancel}
onOk={() => { formSubmit() }} return (
afterClose={() => { <Modal
form.resetFields() width={600}
setFiles([]) title={title}
}} visible={visible}
confirmLoading={confirmLoading} 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 <Input.TextArea rows={3} maxLength={200} placeholder="最长200个字符，100个汉字" />
form={form} </Form.Item>
layout={'vertical'} <Form.Item
className={styles.revise_style} label='附件'
> name='upload'
<Form.Item rules={[{ required: true, message: '请上传附件' }]}>
label='授标意见' <div className={styles.upload_data}>
name='opinion' {files.length > 0 && files.map((v, index) => (
rules={[ <div key={index} className={styles.upload_item}>
{ required: true, message: '请输入授标意见' }, () => ({ <div className={styles.upload_left}>
validator(_, value) { <LinkOutlined />
let _str = value; <span>{v.name}</span>
_str = _str.replace(/[\u4E00-\u9FA5]/g, "AA"); </div>
if (_str.length > 200) { <div className={styles.upload_right} onClick={() => removeFiles(index)}>
return Promise.reject(new Error('最长200个字符，100个汉字')); <DeleteOutlined />
} else { </div>
return Promise.resolve(); </div>
} ))}
}, </div>
}) <Upload
]} action="/api/file/file/upload"
> data={{ fileType: UPLOAD_TYPE }}
<Input.TextArea rows={3} maxLength={200} placeholder="最长200个字符，100个汉字" /> showUploadList={false}
</Form.Item> accept='.doc,.docx,.pdf,.ppt,.pptx,.xls,.xlsx'
<Form.Item beforeUpload={beforeDocUpload}
label='附件' onChange={handleChange}
name='upload' headers={{ token }}
rules={[{ required: true, message: '请上传附件' }]}> >
<div className={styles.upload_data}> <Button loading={loading} icon={<UploadOutlined />}>上传文件</Button>
{files.length > 0 && files.map((v, index) => ( <div style={{ marginTop: '8px' }}>一次上传一个文件，每个附件大小不能超过 20M</div>
<div key={index} className={styles.upload_item}> </Upload>
<div className={styles.upload_left}> </Form.Item>
<LinkOutlined /> </Form>
<span>{v.name}</span> </Modal>
</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; export default SubmitResultModal;
\ No newline at end of file
src/pages/transaction/purchaseAbility/purchaseBid/readyAdd/components/condition.tsx
View file @ f3e76fca
import React, { useState, useEffect } from 'react'; 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 moment from 'moment';
import { PublicApi } from '@/services/api'; import { PublicApi } from '@/services/api';
import { validatorByte } from '../../validator';
import style from './index.less'; import style from './index.less';
const { TextArea } = Input; const { TextArea } = Input;
...@@ -143,17 +145,10 @@ const Condition: React.FC<Iprops> = (props: any) => { ...@@ -143,17 +145,10 @@ const Condition: React.FC<Iprops> = (props: any) => {
label="报价要求" label="报价要求"
name="offer" name="offer"
rules={[ rules={[
{ required: true, message: '请输入报价要求' }, () => ({ { required: true, message: '请输入报价要求' },
validator(_, value) { {
let _str = value; validator: (r, v) => validatorByte(v, 100)
_str = _str.replace(/[\u4E00-\u9FA5]/g, "AA"); }
if (_str.length > 100) {
return Promise.reject(new Error('最长100个字符，50个汉字'));
} else {
return Promise.resolve();
}
},
})
]} ]}
> >
<TextArea rows={3} maxLength={100} placeholder="最长100个字符，50个汉字" /> <TextArea rows={3} maxLength={100} placeholder="最长100个字符，50个汉字" />
...@@ -162,19 +157,11 @@ const Condition: React.FC<Iprops> = (props: any) => { ...@@ -162,19 +157,11 @@ const Condition: React.FC<Iprops> = (props: any) => {
label="付款方式" label="付款方式"
name="paymentType" name="paymentType"
rules={[ rules={[
{ required: true, message: '请输入付款方式' }, () => ({ { required: true, message: '请输入付款方式' },
validator(_, value) { {
let _str = value; validator: (r, v) => validatorByte(v, 100)
_str = _str.replace(/[\u4E00-\u9FA5]/g, "AA"); }
if (_str.length > 100) {
return Promise.reject(new Error('最长100个字符，50个汉字'));
} else {
return Promise.resolve();
}
},
})
]} ]}
> >
<TextArea rows={3} maxLength={100} placeholder="最长100个字符，50个汉字" /> <TextArea rows={3} maxLength={100} placeholder="最长100个字符，50个汉字" />
</Form.Item> </Form.Item>
...@@ -182,19 +169,11 @@ const Condition: React.FC<Iprops> = (props: any) => { ...@@ -182,19 +169,11 @@ const Condition: React.FC<Iprops> = (props: any) => {
label="税费要求" label="税费要求"
name="taxes" name="taxes"
rules={[ rules={[
{ required: true, message: '请输入税费要求' }, () => ({ { required: true, message: '请输入税费要求' },
validator(_, value) { {
let _str = value; validator: (r, v) => validatorByte(v, 100)
_str = _str.replace(/[\u4E00-\u9FA5]/g, "AA"); }
if (_str.length > 100) {
return Promise.reject(new Error('最长100个字符，50个汉字'));
} else {
return Promise.resolve();
}
},
})
]} ]}
> >
<TextArea rows={3} maxLength={100} placeholder="最长100个字符，50个汉字" /> <TextArea rows={3} maxLength={100} placeholder="最长100个字符，50个汉字" />
</Form.Item> </Form.Item>
...@@ -202,19 +181,11 @@ const Condition: React.FC<Iprops> = (props: any) => { ...@@ -202,19 +181,11 @@ const Condition: React.FC<Iprops> = (props: any) => {
label="物流要求" label="物流要求"
name="logistics" name="logistics"
rules={[ rules={[
{ required: true, message: '请输入物流要求' }, () => ({ { required: true, message: '请输入物流要求' },
validator(_, value) { {
let _str = value; validator: (r, v) => validatorByte(v, 100)
_str = _str.replace(/[\u4E00-\u9FA5]/g, "AA"); }
if (_str.length > 100) {
return Promise.reject(new Error('最长100个字符，50个汉字'));
} else {
return Promise.resolve();
}
},
})
]} ]}
> >
<TextArea rows={3} maxLength={100} placeholder="最长100个字符，50个汉字" /> <TextArea rows={3} maxLength={100} placeholder="最长100个字符，50个汉字" />
</Form.Item> </Form.Item>
...@@ -222,19 +193,11 @@ const Condition: React.FC<Iprops> = (props: any) => { ...@@ -222,19 +193,11 @@ const Condition: React.FC<Iprops> = (props: any) => {
label="包装要求" label="包装要求"
name="packRequire" name="packRequire"
rules={[ rules={[
{ required: true, message: '请输入包装要求' }, () => ({ { required: true, message: '请输入包装要求' },
validator(_, value) { {
let _str = value; validator: (r, v) => validatorByte(v, 100)
_str = _str.replace(/[\u4E00-\u9FA5]/g, "AA"); }
if (_str.length > 100) {
return Promise.reject(new Error('最长100个字符，50个汉字'));
} else {
return Promise.resolve();
}
},
})
]} ]}
> >
<TextArea rows={3} maxLength={100} placeholder="最长100个字符，50个汉字" /> <TextArea rows={3} maxLength={100} placeholder="最长100个字符，50个汉字" />
</Form.Item> </Form.Item>
...@@ -242,19 +205,11 @@ const Condition: React.FC<Iprops> = (props: any) => { ...@@ -242,19 +205,11 @@ const Condition: React.FC<Iprops> = (props: any) => {
label="其他要求" label="其他要求"
name="otherRequire" name="otherRequire"
rules={[ rules={[
{ required: true, message: '请输入其他要求' }, () => ({ { required: true, message: '请输入其他要求' },
validator(_, value) { {
let _str = value; validator: (r, v) => validatorByte(v, 100)
_str = _str.replace(/[\u4E00-\u9FA5]/g, "AA"); }
if (_str.length > 100) {
return Promise.reject(new Error('最长100个字符，50个汉字'));
} else {
return Promise.resolve();
}
},
})
]} ]}
> >
<TextArea rows={3} maxLength={100} placeholder="最长100个字符，50个汉字" /> <TextArea rows={3} maxLength={100} placeholder="最长100个字符，50个汉字" />
</Form.Item> </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