341 lines
12 KiB
TypeScript
341 lines
12 KiB
TypeScript
|
import React, {useState} from 'react';
|
|||
|
|
import { Form, Input, Select, Button, Spin, message } from 'antd';
|
|||
|
|
const { Option } = Select;
|
|||
|
|
import { useLocation } from 'umi';
|
|||
|
|
import {createContract, updateContract} from "./ContractService";
|
|||
|
|
import {history} from "@@/core/history";
|
|||
|
|
|
|||
|
|
|
|||
|
|
// 模拟行业选项
|
|||
|
|
const industryOptions = [
|
|||
|
|
{ label: '制造业', value:'0' },
|
|||
|
|
{ label: '服务业', value:'service' },
|
|||
|
|
{ label: '零售业', value:'retail' },
|
|||
|
|
];
|
|||
|
|
|
|||
|
|
const StepOne: React.FC = () => {
|
|||
|
|
const [form] = Form.useForm();
|
|||
|
|
let readOnly = false;
|
|||
|
|
const location = useLocation();
|
|||
|
|
const contractType = location.state?.contractType;
|
|||
|
|
const contractInfo = location.state?.contractInfo;
|
|||
|
|
const opt = location.state?.opt;
|
|||
|
|
const [loading, setLoading] = useState<boolean>(false);
|
|||
|
|
if(opt){
|
|||
|
|
form.setFieldsValue({
|
|||
|
|
...contractInfo
|
|||
|
|
});
|
|||
|
|
if(opt === 'detail'){
|
|||
|
|
readOnly = true;
|
|||
|
|
}else if (opt ==='edit'){
|
|||
|
|
readOnly = false;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 表单提交处理函数
|
|||
|
|
const onFinish = (values: any) => {
|
|||
|
|
values.contractType = contractType;
|
|||
|
|
if(opt === 'detail'){
|
|||
|
|
history.push({
|
|||
|
|
pathname: '/stepTwo',
|
|||
|
|
state: {
|
|||
|
|
contractInfo: contractInfo,
|
|||
|
|
opt: opt
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}else{
|
|||
|
|
try {
|
|||
|
|
if (values.id) {
|
|||
|
|
setLoading(true)
|
|||
|
|
updateContract(values).then((res: any) => {
|
|||
|
|
if(res.code === 200){
|
|||
|
|
// message.success("当前数据更新成功").then(() => {
|
|||
|
|
history.push({
|
|||
|
|
pathname: '/stepTwo',
|
|||
|
|
state: {
|
|||
|
|
contractInfo: res.data,
|
|||
|
|
opt: opt
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
// }).then( () => {
|
|||
|
|
setLoading(false)
|
|||
|
|
// })
|
|||
|
|
}else {
|
|||
|
|
message.error('更新失败');
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
} else {
|
|||
|
|
createContract(values).then( (res: any) => {
|
|||
|
|
if(res.code === 200){
|
|||
|
|
history.push({
|
|||
|
|
pathname: '/stepTwo',
|
|||
|
|
state: {
|
|||
|
|
contractInfo: res.data
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}else {
|
|||
|
|
message.error('更新失败');
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
} catch (error) {
|
|||
|
|
message.error(error.message || '操作失败');
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
// @ts-ignore
|
|||
|
|
const validateCreditCode = (value: string) => {
|
|||
|
|
// 基本格式校验
|
|||
|
|
if (!value || value.length !== 18) {
|
|||
|
|
return '统一社会信用代码必须为18位';
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 正则校验（允许数字和大写字母，不包括I、O、Z、S、V）
|
|||
|
|
const pattern = /^[0-9A-HJ-NPQRTUWXY]{18}$/;
|
|||
|
|
if (!pattern.test(value)) {
|
|||
|
|
return '统一社会信用代码格式不正确';
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 校验码计算
|
|||
|
|
const weightFactor = [1, 3, 9, 27, 19, 26, 16, 17, 20, 29, 25, 13, 8, 24, 10, 30, 28];
|
|||
|
|
const codePoint = {
|
|||
|
|
'0': 0, '1': 1, '2': 2, '3': 3, '4': 4, '5': 5, '6': 6, '7': 7, '8': 8, '9': 9,
|
|||
|
|
'A': 10, 'B': 11, 'C': 12, 'D': 13, 'E': 14, 'F': 15, 'G': 16, 'H': 17, 'J': 18,
|
|||
|
|
'K': 19, 'L': 20, 'M': 21, 'N': 22, 'P': 23, 'Q': 24, 'R': 25, 'T': 26, 'U': 27,
|
|||
|
|
'W': 28, 'X': 29, 'Y': 30
|
|||
|
|
};
|
|||
|
|
const checkCodeDict = {
|
|||
|
|
0: '0', 1: '1', 2: '2', 3: '3', 4: '4', 5: '5', 6: '6', 7: '7', 8: '8', 9: '9',
|
|||
|
|
10: 'A', 11: 'B', 12: 'C', 13: 'D', 14: 'E', 15: 'F', 16: 'G', 17: 'H', 18: 'J',
|
|||
|
|
19: 'K', 20: 'L', 21: 'M', 22: 'N', 23: 'P', 24: 'Q', 25: 'R', 26: 'T', 27: 'U',
|
|||
|
|
28: 'W', 29: 'X', 30: 'Y'
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
let sum = 0;
|
|||
|
|
for (let i = 0; i < 17; i++) {
|
|||
|
|
sum += codePoint[value[i]] * weightFactor[i];
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const mod = sum % 31;
|
|||
|
|
const checkCode = checkCodeDict[mod];
|
|||
|
|
|
|||
|
|
if (checkCode !== value[17]) {
|
|||
|
|
return '统一社会信用代码校验位不正确';
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return null; // 校验通过
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
|
|||
|
|
// 表单提交失败处理函数
|
|||
|
|
const onFinishFailed = (errorInfo: any) => {
|
|||
|
|
// console.log('Form submission failed:', errorInfo);
|
|||
|
|
message.error('表单提交失败，请检查输入');
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<div style={{ padding: '10px' }}>
|
|||
|
|
{/* 添加全局遮罩 */}
|
|||
|
|
{loading && (
|
|||
|
|
<Spin
|
|||
|
|
tip="加载中..."
|
|||
|
|
style={{
|
|||
|
|
position: 'fixed',
|
|||
|
|
top: 0,
|
|||
|
|
left: 0,
|
|||
|
|
width: '100%',
|
|||
|
|
height: '100%',
|
|||
|
|
zIndex: 9999,
|
|||
|
|
background: 'rgba(255, 255, 255, 0.8)',
|
|||
|
|
}}
|
|||
|
|
/>
|
|||
|
|
)}
|
|||
|
|
<Form
|
|||
|
|
form={form}
|
|||
|
|
labelCol={{span:4}}
|
|||
|
|
wrapperCol={{span:20}}
|
|||
|
|
|
|||
|
|
initialValues={{
|
|||
|
|
status: 0
|
|||
|
|
}}
|
|||
|
|
onFinish={onFinish}
|
|||
|
|
onFinishFailed={onFinishFailed}
|
|||
|
|
>
|
|||
|
|
{/* 项目基本信息部分 */}
|
|||
|
|
<div style={{ borderLeft: '4px solid #0066cc', paddingLeft: 8, marginBottom: 16 }}>
|
|||
|
|
<span style={{ fontSize: 16, fontWeight: 'bold' }}>基本信息</span>
|
|||
|
|
</div>
|
|||
|
|
<div style={{ display: 'flex', flexWrap: 'wrap' }}>
|
|||
|
|
<Form.Item hidden={true} name="id"></Form.Item>
|
|||
|
|
<Form.Item
|
|||
|
|
name="status"
|
|||
|
|
label="合同状态"
|
|||
|
|
hidden={true}
|
|||
|
|
>
|
|||
|
|
<Input value={0}/>
|
|||
|
|
</Form.Item>
|
|||
|
|
<Form.Item
|
|||
|
|
name="projectName"
|
|||
|
|
label="项目名称"
|
|||
|
|
rules={[{ required: true, message: '请输入项目名称' }]}
|
|||
|
|
style={{ width: '50%', marginRight: 16 }}
|
|||
|
|
>
|
|||
|
|
<Input placeholder="请输入项目名称" readOnly={readOnly}/>
|
|||
|
|
</Form.Item>
|
|||
|
|
<Form.Item name="projectSelect" label="" style={{ width: '80%' }}>
|
|||
|
|
<Button type="primary" hidden={readOnly}>选择项目</Button>
|
|||
|
|
</Form.Item>
|
|||
|
|
</div>
|
|||
|
|
<div style={{ display: 'flex', flexWrap: 'wrap' }}>
|
|||
|
|
<Form.Item
|
|||
|
|
name="biddingName"
|
|||
|
|
label="标段名称"
|
|||
|
|
rules={[{ required: true, message: '请输入标段名称' }]}
|
|||
|
|
style={{ width: '50%', marginRight: 16 }}
|
|||
|
|
>
|
|||
|
|
<Input placeholder="请输入标段名称" readOnly={readOnly}/>
|
|||
|
|
</Form.Item>
|
|||
|
|
<Form.Item
|
|||
|
|
name="biddingCode"
|
|||
|
|
label="标段编号"
|
|||
|
|
rules={[{ required: true, message: '请输入标段编号' }]}
|
|||
|
|
style={{ width: '45%' }}
|
|||
|
|
>
|
|||
|
|
<Input placeholder="请输入标段编号" readOnly={readOnly} />
|
|||
|
|
</Form.Item>
|
|||
|
|
</div>
|
|||
|
|
<Form.Item name="sectionSelect" label="" style={{ width: '20%' }}>
|
|||
|
|
<Button type="primary" hidden={readOnly}>选择标段</Button>
|
|||
|
|
</Form.Item>
|
|||
|
|
|
|||
|
|
{/* 我方签约主体信息部分 */}
|
|||
|
|
<div style={{ borderLeft: '4px solid #0066cc', paddingLeft: 8, marginBottom: 16, marginTop: 16 }}>
|
|||
|
|
<span style={{ fontSize: 16, fontWeight: 'bold' }}>我方签约主体信息</span>
|
|||
|
|
</div>
|
|||
|
|
<div style={{ display: 'flex', flexWrap: 'wrap' }}>
|
|||
|
|
<Form.Item
|
|||
|
|
name="purchaserName"
|
|||
|
|
label="采购单位"
|
|||
|
|
rules={[{ required: true, message: '请输入采购单位' }]}
|
|||
|
|
style={{ width: '50%', marginRight: 16 }}
|
|||
|
|
>
|
|||
|
|
<Input placeholder="请输入采购单位" readOnly={readOnly} />
|
|||
|
|
</Form.Item>
|
|||
|
|
<Form.Item
|
|||
|
|
name="purchaserCode"
|
|||
|
|
label="统一社会信用代码"
|
|||
|
|
rules={[{ required: true, message: '请输入统一社会信用代码' },
|
|||
|
|
// ({ getFieldValue }) => ({
|
|||
|
|
// validator(rule, value) {
|
|||
|
|
// const errorMessage = validateCreditCode(value);
|
|||
|
|
// if (errorMessage) {
|
|||
|
|
// return Promise.reject(errorMessage);
|
|||
|
|
// }
|
|||
|
|
// return Promise.resolve();
|
|||
|
|
// },
|
|||
|
|
// })
|
|||
|
|
]}
|
|||
|
|
style={{ width: '50%', marginRight: 16 }}
|
|||
|
|
>
|
|||
|
|
<Input placeholder="请输入统一社会信用代码" readOnly={readOnly} />
|
|||
|
|
</Form.Item>
|
|||
|
|
<Form.Item
|
|||
|
|
name="industryCode"
|
|||
|
|
label="所属主要行业"
|
|||
|
|
rules={[{ required: true, message: '请选择所属主要行业' }]}
|
|||
|
|
style={{ width: '45%' }}
|
|||
|
|
>
|
|||
|
|
<Select placeholder="请选择" disabled={readOnly}>
|
|||
|
|
{industryOptions.map(({ label, value }) => (
|
|||
|
|
<Option key={value} value={value}>
|
|||
|
|
{label}
|
|||
|
|
</Option>
|
|||
|
|
))}
|
|||
|
|
</Select>
|
|||
|
|
</Form.Item>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* 对方签约主体信息部分 */}
|
|||
|
|
<div style={{ borderLeft: '4px solid #0066cc', paddingLeft: 8, marginBottom: 16, marginTop: 16 }}>
|
|||
|
|
<span style={{ fontSize: 16, fontWeight: 'bold' }}>对方签约主体信息</span>
|
|||
|
|
</div>
|
|||
|
|
<div style={{ display: 'flex', flexWrap: 'wrap' }}>
|
|||
|
|
<Form.Item
|
|||
|
|
name="supplierName"
|
|||
|
|
label="供应商公司名称"
|
|||
|
|
rules={[{ required: true, message: '请输入供应商公司名称' }]}
|
|||
|
|
style={{ width: '50%', marginRight: 16 }}
|
|||
|
|
>
|
|||
|
|
<Input placeholder="请输入供应商公司名称" readOnly={readOnly} />
|
|||
|
|
</Form.Item>
|
|||
|
|
<Form.Item
|
|||
|
|
name="supplierCode"
|
|||
|
|
label="统一社会信用代码"
|
|||
|
|
rules={[
|
|||
|
|
{ required: true, message: '请输入统一社会信用代码' },
|
|||
|
|
// ({ getFieldValue }) => ({
|
|||
|
|
// validator(rule, value) {
|
|||
|
|
// const errorMessage = validateCreditCode(value);
|
|||
|
|
// if (errorMessage) {
|
|||
|
|
// return Promise.reject(errorMessage);
|
|||
|
|
// }
|
|||
|
|
// return Promise.resolve();
|
|||
|
|
// },
|
|||
|
|
// })
|
|||
|
|
]}
|
|||
|
|
style={{ width: '45%' }}
|
|||
|
|
>
|
|||
|
|
<Input placeholder="请输入统一社会信用代码" readOnly={readOnly} />
|
|||
|
|
</Form.Item>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
<div style={{ display: 'flex', flexWrap: 'wrap' }}>
|
|||
|
|
<Form.Item name="supplierSelect" label="" style={{ width: '20%' }}>
|
|||
|
|
<Button type="primary" hidden={readOnly}>选择供应商</Button>
|
|||
|
|
</Form.Item>
|
|||
|
|
{/*<Form.Item*/}
|
|||
|
|
{/* name="supplierName"*/}
|
|||
|
|
{/* label="供应商公司名称"*/}
|
|||
|
|
{/* rules={[{ required: true, message: '请输入供应商公司名称' }]}*/}
|
|||
|
|
{/* style={{ width: '50%', marginRight: 16 }}*/}
|
|||
|
|
{/*>*/}
|
|||
|
|
{/* <Input placeholder="请输入供应商公司名称" readOnly={readOnly} />*/}
|
|||
|
|
{/*</Form.Item>*/}
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
<div style={{ display: 'flex', flexWrap: 'wrap' }}>
|
|||
|
|
<Form.Item
|
|||
|
|
name="signerName"
|
|||
|
|
label="供应商签约人"
|
|||
|
|
style={{ width: '50%', marginRight: 16 }}
|
|||
|
|
rules={[{ min: 2, message: '姓名长度不能少于2个字符' },
|
|||
|
|
{ max: 20, message: '姓名长度不能超过20个字符' },
|
|||
|
|
{ pattern: /^[\u4e00-\u9fa5a-zA-Z\s·]{2,20}$/, message: '请输入正确的姓名' }]}
|
|||
|
|
>
|
|||
|
|
<Input placeholder="" readOnly={readOnly}/>
|
|||
|
|
</Form.Item>
|
|||
|
|
<Form.Item
|
|||
|
|
name="signerContact"
|
|||
|
|
label="供应商联系方式"
|
|||
|
|
style={{ width: '50%' }}
|
|||
|
|
rules={ [{ pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码' }]}
|
|||
|
|
>
|
|||
|
|
<Input placeholder="" readOnly={readOnly} />
|
|||
|
|
</Form.Item>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* 居中显示的下一步按钮 */}
|
|||
|
|
<div style={{ display: 'flex', justifyContent: 'center', marginTop: 24 }}>
|
|||
|
|
<Form.Item>
|
|||
|
|
<Button type="primary" htmlType="submit" style={{ width: 200 }} onClick={ () => {}}>
|
|||
|
|
下一步，合同信息
|
|||
|
|
</Button>
|
|||
|
|
</Form.Item>
|
|||
|
|
</div>
|
|||
|
|
</Form>
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
export default StepOne;
|