菜单,合同前端提交
This commit is contained in:
340
src/pages/Contract/StepOne.tsx
Normal file
340
src/pages/Contract/StepOne.tsx
Normal file
@ -0,0 +1,340 @@
|
||||
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;
|
Reference in New Issue
Block a user