Skip to content

J
jinfa-platform
Commit fff0a0d5 authored by 前端-黄佳鑫's avatar 前端-黄佳鑫
Browse files
Options

电子合同

parent da8d79ad
Show whitespace changes
Inline Side-by-side
Showing with 296 additions and 89 deletions
src/pages/transaction/electronicContracts/addContract/index.tsx
View file @ fff0a0d5
import React, { useEffect } from 'react'
import React, { useEffect, useState } from 'react'
import { history } from 'umi'
import { Form, Input, Upload, Card, Tooltip, Button, message } from 'antd'
import { Form, Input, Upload, Card, Tooltip, Button, message, Badge, Popconfirm } from 'antd'
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import ReutrnEle from '@/components/ReturnEle';
import { PublicApi } from '@/services/api'
......@@ -9,8 +9,13 @@ import { UPLOAD_TYPE } from '@/constants'
import { QuestionCircleOutlined, StarOutlined, FileWordFilled, UploadOutlined, DeleteOutlined } from '@ant-design/icons';
import styles from './index.less'
const AddContract: React.FC<{}> = () => {
const AddContract: React.FC<{}> = (props) => {
const { type } = history.location.query
const { TextArea } = Input;
const [form] = Form.useForm();
const [fileExampleUrl, setFileExampleUrl] = useState<string>('');
const [uploadFile, setUploadFile] = useState<any>([]);
const [fileUrl, setFileUrl] = useState<string>('')
/**判断文件类型和大小 */
const beforeDocUpload = (file: UploadFile) => {
const isJpgOrPng = file.type === 'application/msword' || file.type === 'application/vnd.openxmlformats-officedocument.wordprocessingml.document';
......@@ -26,7 +31,58 @@ const AddContract: React.FC<{}> = () => {
/**上传回调 */
const handleChange = ({ fileList }) => {
console.log(fileList, 10086)
if (fileList[0].response) {
const file = [{
name: fileList[0].name,
file: fileList[0].response.data
}]
setFileUrl(fileList[0].response.data)
setUploadFile(file)
}
}
/**合同模板样例查询 */
useEffect(() => {
PublicApi.getOrderContractTemplateExample().then(res => {
setFileExampleUrl(res.data)
})
}, [])
/**新增&修改 */
const sharedFn = async (parmas: any) => {
await PublicApi.postOrderContractTemplateAdd(parmas).then(res => {
setTimeout(() => {
history.goBack()
}, 1000)
})
}
/**提交数据 */
const onSubmit = async () => {
await form.validateFields().then(res => {
const parmas = {
name: res.name,
version: res.version,
description: res.description,
fileExampleUrl,
fileUrl,
}
sharedFn(parmas)
console.log(parmas)
})
}
/**删除上传的合同 */
const delectContract = () => {
setUploadFile([]);
setFileUrl('');
}
const confirm = () => {
// message.error(`未保存地址信息`)
setTimeout(() => {
history.goBack()
}, 1000)
}
return (
......@@ -36,17 +92,22 @@ const AddContract: React.FC<{}> = () => {
>
<Card>
<div className={styles.addcontract_wrap}>
<Form>
<Form.Item label='合同模板名称' colon={false} name='name'>
<Input />
<Form form={form}>
<Form.Item label='合同模板名称' colon={false} name='name' rules={[{ required: type && true, message: '请输入合同模板名称' }]}>
{type ? <Input /> : <span>1</span>}
</Form.Item>
<Form.Item label='版本号' colon={false} name='version'>
<Input />
<Form.Item label='版本号' colon={false} name='version' rules={[{ required: type && true, message: '请输入版本号' }]}>
{type ? <Input /> : <span>1</span>}
</Form.Item>
{!type &&
<Form.Item label='状态' colon={false} name='status'>
<span><Badge status="success" /> 有效</span>
</Form.Item>
}
<Form.Item label='合同模板说明' colon={false} name='description'>
<TextArea rows={4} />
{type ? <TextArea rows={4} /> : <span>1</span>}
</Form.Item>
<Form.Item label={<div>合同文件模板样例&nbsp;<Tooltip placement="top" title='制作合同模板前，可下载合同模板样例，按照样例指引制作合同模板，其中需要添加的参数可以在合同模板参数查询中查找。'><QuestionCircleOutlined /></Tooltip></div>} colon={false} name='fileExampleUrl'>
<Form.Item label={<div>合同文件模板样例&nbsp;<Tooltip placement="top" title='制作合同模板前，可下载合同模板样例，按照样例指引制作合同模板，其中需要添加的参数可以在合同模板参数查询中查找。'><QuestionCircleOutlined /></Tooltip></div>} colon={false}>
<div className={styles.upload_item}>
<div className={styles.upload_left}>
<FileWordFilled />
......@@ -57,19 +118,30 @@ const AddContract: React.FC<{}> = () => {
</div>
</div>
</Form.Item>
<Form.Item label={<div>合同文件模板&nbsp;<Tooltip placement="top" title='制作完成的合同模板，需要上传至平台，才能在后续的订单中签订电子合同'><QuestionCircleOutlined /></Tooltip></div>} colon={false} name='fileUrl'>
<Form.Item label={<div>合同文件模板&nbsp;<Tooltip placement="top" title='制作完成的合同模板，需要上传至平台，才能在后续的订单中签订电子合同'><QuestionCircleOutlined /></Tooltip></div>} colon={false}>
<div className={styles.upload_data}>
<div className={styles.upload_item}>
{uploadFile.map((v, i) => (
<div className={styles.upload_item} key={i}>
<div className={styles.upload_left}>
<FileWordFilled />
<span>合同模板样例.doc</span>
<span>{v.name}</span>
</div>
{
type ?
<div className={styles.upload_right}>
<span>预览</span>
<DeleteOutlined />
<DeleteOutlined onClick={delectContract} />
</div>
:
<div className={styles.upload_right}>
<span>下载</span>
</div>
}
</div>
))}
</div>
{
(uploadFile.length === 0 && type) &&
<Upload
action="/api/file/file/upload"
data={{ fileType: UPLOAD_TYPE }}
......@@ -81,11 +153,21 @@ const AddContract: React.FC<{}> = () => {
<Button icon={<UploadOutlined />}>上传文件</Button>
<div style={{ marginTop: '8px' }}>支持扩展名：.doc，文件大小不超过 20M</div>
</Upload>
}
</Form.Item>
<Form.Item>
<Button type="primary">保存</Button>
{type &&
<Form.Item style={{ marginLeft: '174px' }}>
<Button type="primary" style={{ marginRight: '24px' }} onClick={onSubmit}>保存</Button>
<Popconfirm
title="未保存，是否确定执行这个操作?"
onConfirm={confirm}
okText="是"
cancelText="否"
>
<Button>取消</Button>
</Popconfirm>
</Form.Item>
}
</Form>
</div>
</Card>
......
src/pages/transaction/electronicContracts/apply/index.tsx
View file @ fff0a0d5
import React from 'react'
import React, { useState } from 'react'
import styles from './index.less'
import { Link } from 'umi';
import { PageHeaderWrapper } from '@ant-design/pro-layout'
......@@ -7,7 +7,6 @@ import { Descriptions, Button } from 'antd';
import div from './../../../editor/configs/componentConfigs/HTML/div';
const Apply = () => {
/**头部状态的颜色值 */
const applyStaus = [{
status: 1,
......@@ -30,8 +29,8 @@ const Apply = () => {
icon: <CloseCircleFilled />,
color: '#D32F2F',
}]
const num = 1
const [num, setNum] = useState<number>(1);
const [authType, setAuthType] = useState<number>(1); // 认证方式 1-法人认证 2-经办人认证 3-个人认证
return (
<PageHeaderWrapper>
......@@ -47,8 +46,8 @@ const Apply = () => {
<div className={styles.status}>{item.icon} {item.name}</div>
</div>
<div className={styles.apply_status_btn}>
<Link to={`/memberCenter/tranactionAbility/electronicContracts/enterpriseCertified`}><Button size='middle' style={{ color: item.color }}>{item.status === 1 ? '立即申请' : '重新申请'}</Button></Link>
{item.status === 3 && <Button size='middle' ghost>查看进度</Button>}
<Link to={`/memberCenter/tranactionAbility/electronicContracts/enterpriseCertified?authTypeEdit=${authType}`}><Button size='middle' style={{ color: item.color }}>{item.status === 1 ? '立即申请' : '重新申请'}</Button></Link>
{num === 3 && <Button style={{ marginLeft: '24px' }} size='middle' ghost>查看进度</Button>}
</div>
</div>
}
......@@ -56,6 +55,8 @@ const Apply = () => {
))
}
{/* 企业 */}
{(authType === 1 || authType === 2) &&
<div className={styles.apply_item}>
<Descriptions title="申请信息" column={1}>
<Descriptions.Item label="公司名称">温州市隆昌皮业有限公司</Descriptions.Item>
......@@ -67,6 +68,19 @@ const Apply = () => {
<Descriptions.Item label="验证方式">-</Descriptions.Item>
</Descriptions>
</div>
}
{/* 个人 */}
{authType === 3 &&
<div className={styles.apply_item}>
<Descriptions title="申请信息" column={1}>
<Descriptions.Item label="姓名">张三</Descriptions.Item>
<Descriptions.Item label="手机号">+86 185 2929 6758</Descriptions.Item>
<Descriptions.Item label="身份证号">321023 19891205 3746</Descriptions.Item>
<Descriptions.Item label="验证方式">-</Descriptions.Item>
</Descriptions>
</div>
}
</div>
</PageHeaderWrapper>
......
src/pages/transaction/electronicContracts/classSearch/index.tsx
View file @ fff0a0d5
import React from 'react'
import React, { useState, useRef } from 'react'
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import { Card, Row, Col, Input, Button } from 'antd';
import { ColumnType } from 'antd/lib/table/interface';
import { StandardTable } from 'god';
import { PublicApi } from '@/services/api'
const ClassSearch = () => {
const ref = useRef<any>({});
//表头
const columns: ColumnType<any>[] = [{
title: 'ID',
......@@ -22,6 +23,16 @@ const ClassSearch = () => {
dataIndex: 'status',
}]
// 列表数据
const fetchData = (params?: any) => {
console.log(params)//可以直接打印参数
return new Promise((resolve, reject) => {
PublicApi.getContractParamPage({ ...params }).then(res => {
resolve(res.data)
})
})
}
return (
<PageHeaderWrapper>
<Card>
......@@ -30,6 +41,8 @@ const ClassSearch = () => {
rowKey: 'id',
}}
columns={columns}
currentRef={ref}
fetchTableData={(params: any) => fetchData(params)}
controlRender={
<Row>
<Col span={12}>
......
src/pages/transaction/electronicContracts/components/alipay/index.tsx deleted 100644 → 0
View file @ da8d79ad
import React from 'react'
import { Result } from 'antd'
import styles from '../index.less'
import { AlipaySquareFilled } from '@ant-design/icons';
const Alipay = () => {
return(
<div className={styles.info_wrap}>
<Result
title="请使用法人手机号注册的支付宝账号登录支付"
extra={[
<div key='key'>
<div className={styles.info_wran}>并使用支付宝首页的扫一扫功能</div>
<div className={styles.info_wran}>扫描下面的二维码，然后按照支付宝APP的</div>
<div className={styles.alipay_qrcode} />
<div className={styles.alipay_wran}>
<AlipaySquareFilled
style={{
fontSize: '24px',
color: '#3f7ed2',
marginRight: '8px'
}}
/>
支付宝扫一扫
</div>
</div>
]}
/>
</div>
)
}
export default Alipay
src/pages/transaction/electronicContracts/components/corporate/index.tsx
View file @ fff0a0d5
import React from 'react'
import React, { useState } from 'react'
import { Button, Row, Col, Form, Input, Select } from 'antd'
import styles from '../index.less'
import cx from 'classnames'
import { QuestionCircleOutlined } from '@ant-design/icons';
const Corporate = () => {
interface queryProps {
authType: number,
authTypeFn: Function,
checkPayWayFn: Function
}
const Corporate: React.FC<queryProps> = (props) => {
const { Option } = Select;
const { authType, authTypeFn, checkPayWayFn } = props;
const [form] = Form.useForm();
const [payWay, setPayWay] = useState<number>(1); // 1.支付宝, 2.对公, 3.短信
// 测试表当提交效果
const onSubmit = async () => {
const value = await form.validateFields();
console.log(value)
}
// 切换支付认证方式
const CheckPayWay = (type: number) => {
setPayWay(type)
checkPayWayFn(type)
}
return (
<>
{/**认证方式*/}
{/**企业认证方式*/}
{authType === 1 &&
<div className={styles.info_wrap}>
<div className={styles.info_item}>
<div className={styles.info_item_con}>
......@@ -25,22 +38,24 @@ const Corporate = () => {
<div className={styles.item_label}>认证方式 <QuestionCircleOutlined style={{ color: '#C0C4CC' }} /></div>
<div className={styles.item_control}>
<Row className={styles.card_checkbox}>
<Col className={cx(styles.card_checkbox_item, styles.active)}>支付宝验证</Col>
<Col className={cx(styles.card_checkbox_item, styles.active)}>手机验证码验证</Col>
<Col className={cx(styles.card_checkbox_item, payWay===1&&styles.active)} onClick={()=>CheckPayWay(1)}>支付宝验证</Col>
<Col className={cx(styles.card_checkbox_item, payWay===2&&styles.active)} onClick={()=>CheckPayWay(2)}>对公账户验证</Col>
</Row>
</div>
</div>
<div className={styles.item_con}>
<div className={styles.item_label}></div>
<div className={styles.item_control}>
<Button type='primary'>下一步</Button>
<Button>上一步</Button>
<Button type='primary' onClick={()=>authTypeFn('', 2)}>下一步</Button>
<Button onClick={()=>authTypeFn('', 0)}>上一步</Button>
</div>
</div>
</div>
</div>
</div>
}
{/**经办人认证*/}
{authType === 2 &&
<div className={styles.info_wrap}>
<div className={styles.info_item}>
<div className={styles.info_item_title}>企业信息核验</div>
......@@ -68,7 +83,7 @@ const Corporate = () => {
<Form.Item label='手机号码' colon={false} required={true}>
<Row gutter={24}>
<Col span={7}>
<Form.Item style={{width: '150px'}} name='code' rules={[{ required: true, message: '请选择区号' }]}>
<Form.Item style={{ width: '150px' }} name='code' rules={[{ required: true, message: '请选择区号' }]}>
<Select style={{ width: '100%' }}>
<Option value="Zhejiang">Zhejiang</Option>
<Option value="Jiangsu">Jiangsu</Option>
......@@ -76,7 +91,7 @@ const Corporate = () => {
</Form.Item>
</Col>
<Col span={17}>
<Form.Item style={{width: '398px'}} name='phone' rules={[{ required: true, message: '请输入手机号码' }]}>
<Form.Item style={{ width: '398px' }} name='phone' rules={[{ required: true, message: '请输入手机号码' }]}>
<Input />
</Form.Item>
</Col>
......@@ -92,6 +107,32 @@ const Corporate = () => {
</div>
</div>
</div>
}
{/**个人认证方式*/}
{authType === 3 &&
<div className={styles.info_wrap}>
<div className={styles.info_item}>
<div className={styles.info_item_con}>
<div className={styles.item_con}>
<div className={styles.item_label}>认证方式 <QuestionCircleOutlined style={{ color: '#C0C4CC' }} /></div>
<div className={styles.item_control}>
<Row className={styles.card_checkbox}>
<Col className={cx(styles.card_checkbox_item, styles.active)}>支付宝验证</Col>
<Col className={cx(styles.card_checkbox_item, styles.active)}>手机验证码验证</Col>
</Row>
</div>
</div>
<div className={styles.item_con}>
<div className={styles.item_label}></div>
<div className={styles.item_control}>
<Button type='primary'>下一步</Button>
<Button>上一步</Button>
</div>
</div>
</div>
</div>
</div>
}
</>
)
}
......
src/pages/transaction/electronicContracts/components/enterpriseInfoCheck/index.tsx
View file @ fff0a0d5
import React from 'react'
import React, { useState } from 'react'
import styles from '../index.less'
import { Button, Row, Col } from 'antd'
import cx from 'classnames'
import { QuestionCircleOutlined } from '@ant-design/icons';
const EnterpriseInfoCheck = () => {
interface queryProps {
authTypeEdit: string,
authTypeFn: Function
}
const EnterpriseInfoCheck: React.FC<queryProps> = (props) => {
const { authTypeEdit, authTypeFn } = props;
const [authTypeBtn, setAuthTypeBtn] = useState<number>(1); // 认证方式
// 切换认证方式
const checkAuthType = (type:number) => {
setAuthTypeBtn(type);
}
return (
<>
{/* 企业展示 */}
{(authTypeEdit === '1' || authTypeEdit === '2') &&
<div className={styles.info_wrap}>
<div className={styles.info_item}>
<div className={styles.info_item_title}>企业信息核验</div>
......@@ -45,21 +58,23 @@ const EnterpriseInfoCheck = () => {
<div className={styles.item_label}>认证方式 <QuestionCircleOutlined style={{ color: '#C0C4CC' }} /></div>
<div className={styles.item_control}>
<Row className={styles.card_checkbox}>
<Col className={cx(styles.card_checkbox_item, styles.active)}>法人认证</Col>
<Col className={cx(styles.card_checkbox_item, styles.active)}>经办人认证</Col>
<Col className={cx(styles.card_checkbox_item, authTypeBtn===1&&styles.active)} onClick={()=>checkAuthType(1)}>法人认证</Col>
<Col className={cx(styles.card_checkbox_item, authTypeBtn===2&&styles.active)} onClick={()=>checkAuthType(2)}>经办人认证</Col>
</Row>
</div>
</div>
<div className={styles.item_con}>
<div className={styles.item_label}></div>
<div className={styles.item_control}>
<Button type='primary'>下一步</Button>
<Button type='primary' onClick={()=>authTypeFn(authTypeBtn, 1)}>下一步</Button>
</div>
</div>
</div>
</div>
</div>
}
{/* 个人展示 */}
{authTypeEdit === '3' &&
<div className={styles.info_wrap}>
<div className={styles.info_item}>
<div className={styles.info_item_title}>个人信息核验</div>
......@@ -85,6 +100,8 @@ const EnterpriseInfoCheck = () => {
</div>
</div>
</div>
}
</>
)
}
......
src/pages/transaction/electronicContracts/components/publicAccount/index.tsx
View file @ fff0a0d5
import React from 'react'
import { Result, Button, Form, Input, Row, Col } from 'antd'
import styles from '../index.less'
import { AlipaySquareFilled } from '@ant-design/icons';
const PublicAccount = () => {
interface queryProps {
payWay: number,
authType: number
}
const PublicAccount: React.FC<queryProps> = (props) => {
const { payWay, authType } = props;
return (
<>
{payWay === 1 &&
<div className={styles.info_wrap}>
{/** 支付宝认证*/}
<Result
title="请使用法人手机号注册的支付宝账号登录支付"
extra={[
<div key='key'>
<div className={styles.info_wran}>并使用支付宝首页的扫一扫功能</div>
<div className={styles.info_wran}>扫描下面的二维码，然后按照支付宝APP的</div>
<div className={styles.alipay_qrcode} />
<div className={styles.alipay_wran}>
<AlipaySquareFilled
style={{
fontSize: '24px',
color: '#3f7ed2',
marginRight: '8px'
}}
/>
支付宝扫一扫
</div>
</div>
]}
/>
</div>
}
{(authType === 1 && payWay === 2) &&
<>
<div className={styles.info_wrap}>
{/** 对公账户确认*/}
<Result
......@@ -34,8 +68,6 @@ const PublicAccount = () => {
</div>
]}
/>
</div>
<div className={styles.info_wrap}>
{/** 对公账户打款*/}
......@@ -60,6 +92,10 @@ const PublicAccount = () => {
]}
/>
</div>
</>
}
{(authType === 2 && payWay === 3) &&
<div className={styles.info_wrap}>
{/** 系统将向法人手机号码发送验证短信*/}
<Result
......@@ -79,6 +115,9 @@ const PublicAccount = () => {
]}
/>
</div>
}
{authType === 3 &&
<div className={styles.info_wrap}>
{/** 系统将向当前会员手机号码发送短信验证码*/}
<Result
......@@ -90,20 +129,18 @@ const PublicAccount = () => {
<div>法人手机号：</div>
<div>+86 186 7700 2345</div>
</div>
<Form style={{width: '338px', margin: 'auto'}}>
<Form style={{ width: '338px', margin: 'auto' }}>
<Form.Item noStyle>
<Row gutter={6}>
<Col span={16}>
<Form.Item name='code' rules={[{ required: true, message: '请输入短信验证码' }]}>
<Input placeholder='请输入您收到的转账金额' />
<Input placeholder='请输入短信验证码' />
</Form.Item>
</Col>
<Col span={8}>
<Button>获取验证码</Button>
</Col>
</Row>
</Form.Item>
</Form>
<div className={styles.bank_btn} style={{ textAlign: 'center' }}>
......@@ -114,6 +151,7 @@ const PublicAccount = () => {
]}
/>
</div>
}
</>
)
}
......
src/pages/transaction/electronicContracts/components/steps/index.tsx
View file @ fff0a0d5
......@@ -3,10 +3,16 @@ import styles from './index.less'
import { Steps } from 'antd'
const { Step } = Steps;
const StepComponents = () => {
interface stepProps {
step: number,
}
const StepComponents: React.FC<stepProps> = (props) => {
const { step } = props;
return (
<div className={styles.step_info}>
<Steps size="small" current={0}>
<Steps size="small" current={step}>
<Step title="企业信息核验" />
<Step title="经办人/法人认证" />
<Step title="企业认证" />
......
src/pages/transaction/electronicContracts/enterpriseCertified/index.tsx
View file @ fff0a0d5
import React from 'react'
import React, { useState } from 'react'
import { history } from 'umi'
import ReutrnEle from '@/components/ReturnEle';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import StepComponents from '../components/steps'
import EnterpriseInfoCheck from '../components/enterpriseInfoCheck'
import Corporate from '../components/corporate'
import Alipay from '../components/alipay'
import PublicAccount from '../components/publicAccount'
const EnterpriseCertified = () => {
const { authTypeEdit } = history.location.query;
const [step, setStep] = useState<number>(0);
const [authType, setAuthType] = useState<number>(1);
const [payWay, setPayWay] = useState<number>(1); // 1.支付宝, 2.对公, 3.短信
//认证方式切换Fn
const authTypeFn = (type: number, steps: number) => {
if (type) { setAuthType(type); }
setStep(steps)
}
//切换支付方式
const checkPayWayFn = (type: number) => {
setPayWay(type)
}
return (
<PageHeaderWrapper
onBack={() => history.goBack()}
backIcon={<ReutrnEle description="返回" />}
>
<StepComponents />
<EnterpriseInfoCheck />
<Corporate />
{/**<Alipay />*/}
<PublicAccount />
<StepComponents step={step} />
{step === 0 &&
<EnterpriseInfoCheck
authTypeEdit={authTypeEdit}
authTypeFn={authTypeFn}
/>
}
{step === 1 &&
<Corporate
authType={authType}
checkPayWayFn={checkPayWayFn}
authTypeFn={authTypeFn}
/>
}
{step === 2 &&
<PublicAccount
authType={authType}
payWay={payWay}
/>}
</PageHeaderWrapper>
)
}
......
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