菜单,合同前端提交

This commit is contained in:
32503
2025-06-11 09:48:28 +08:00
parent f9d6d38866
commit 300a9945cf
8 changed files with 2602 additions and 0 deletions

View 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;