Skip to content

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

电子合同接口接入

parent 86719b31
Hide whitespace changes
Inline Side-by-side
Showing with 316 additions and 76 deletions
src/pages/transaction/electronicContracts/addContract/index.tsx
View file @ 2055e261
......@@ -10,12 +10,13 @@ import { QuestionCircleOutlined, StarOutlined, FileWordFilled, UploadOutlined, D
import styles from './index.less'
const AddContract: React.FC<{}> = (props) => {
const { type } = history.location.query
const { type, id } = 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 [fileExampleUrl, setFileExampleUrl] = useState<any>({});
const [uploadFile, setUploadFile] = useState<any>({});
const [fileUrl, setFileUrl] = useState<string>('');
const [data, setData] = useState<any>({});
/**判断文件类型和大小 */
const beforeDocUpload = (file: UploadFile) => {
const isJpgOrPng = file.type === 'application/msword' || file.type === 'application/vnd.openxmlformats-officedocument.wordprocessingml.document';
......@@ -32,10 +33,10 @@ const AddContract: React.FC<{}> = (props) => {
/**上传回调 */
const handleChange = ({ fileList }) => {
if (fileList[0].response) {
const file = [{
const file = {
name: fileList[0].name,
file: fileList[0].response.data
}]
}
setFileUrl(fileList[0].response.data)
setUploadFile(file)
}
......@@ -50,11 +51,21 @@ const AddContract: React.FC<{}> = (props) => {
/**新增&修改 */
const sharedFn = async (parmas: any) => {
await PublicApi.postOrderContractTemplateAdd(parmas).then(res => {
setTimeout(() => {
history.goBack()
}, 1000)
})
if (type === 'add') {
await PublicApi.postOrderContractTemplateAdd(parmas).then(res => {
setTimeout(() => {
history.goBack()
}, 1000)
})
} else {
parmas.id = id;
await PublicApi.postOrderContractTemplateUpdate(parmas).then(res => {
setTimeout(() => {
history.goBack()
}, 1000)
})
}
}
/**提交数据 */
......@@ -64,8 +75,10 @@ const AddContract: React.FC<{}> = (props) => {
name: res.name,
version: res.version,
description: res.description,
fileExampleUrl,
fileExampleUrl: fileExampleUrl.contractName,
fileExampleName: fileExampleUrl.contractUrl,
fileUrl,
fileName: uploadFile.name
}
sharedFn(parmas)
console.log(parmas)
......@@ -74,7 +87,7 @@ const AddContract: React.FC<{}> = (props) => {
/**删除上传的合同 */
const delectContract = () => {
setUploadFile([]);
setUploadFile({});
setFileUrl('');
}
......@@ -85,6 +98,31 @@ const AddContract: React.FC<{}> = (props) => {
}, 1000)
}
/**班级查看数据 */
useEffect(() => {
if (id) {
PublicApi.getOrderContractTemplateGet({ id }).then(res => {
setData(res.data);
setUploadFile({
name: res.data.fileName,
file: res.data.fileUrl
})
if (type === 'edit') {
form.setFieldsValue(res.data)
}
})
}
}, [id])
/**下载 */
const onDownload = (file: any) => {
window.location.href = `/api/order/contractTemplate/downloadContract?contractName=${file.contractName}&contractUrl=${file.contractUrl}`
}
/**预览 */
const onView = (file: any) => {
}
return (
<PageHeaderWrapper
onBack={() => history.goBack()}
......@@ -94,54 +132,47 @@ const AddContract: React.FC<{}> = (props) => {
<div className={styles.addcontract_wrap}>
<Form form={form}>
<Form.Item label='合同模板名称' colon={false} name='name' rules={[{ required: type && true, message: '请输入合同模板名称' }]}>
{type ? <Input /> : <span>1</span>}
{type ? <Input /> : <span>{data.name}</span>}
</Form.Item>
<Form.Item label='版本号' colon={false} name='version' rules={[{ required: type && true, message: '请输入版本号' }]}>
{type ? <Input /> : <span>1</span>}
{type ? <Input /> : <span>{data.version}</span>}
</Form.Item>
{!type &&
<Form.Item label='状态' colon={false} name='status'>
<span><Badge status="success" /> 有效</span>
<span>{data.state === 1 ? <><Badge status="success" /> 有效</> : <><Badge status="error" /> 失效</>}</span>
</Form.Item>
}
<Form.Item label='合同模板说明' colon={false} name='description'>
{type ? <TextArea rows={4} /> : <span>1</span>}
{type ? <TextArea rows={4} /> : <span>{data.description}</span>}
</Form.Item>
<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 />
<span>合同模板样例.doc</span>
<span>{fileExampleUrl.contractName}</span>
</div>
<div className={styles.upload_right}>
<span>下载</span>
<span onClick={() => onDownload(fileExampleUrl)}>下载</span>
</div>
</div>
</Form.Item>
<Form.Item label={<div>合同文件模板&nbsp;<Tooltip placement="top" title='制作完成的合同模板，需要上传至平台，才能在后续的订单中签订电子合同'><QuestionCircleOutlined /></Tooltip></div>} colon={false}>
<div className={styles.upload_data}>
{uploadFile.map((v, i) => (
<div className={styles.upload_item} key={i}>
{Object.keys(uploadFile).length > 0 &&
<div className={styles.upload_item}>
<div className={styles.upload_left}>
<FileWordFilled />
<span>{v.name}</span>
<span>{uploadFile.name}</span>
</div>
<div className={styles.upload_right}>
<span>预览</span>
<DeleteOutlined onClick={delectContract} />
</div>
{
type ?
<div className={styles.upload_right}>
<span>预览</span>
<DeleteOutlined onClick={delectContract} />
</div>
:
<div className={styles.upload_right}>
<span>下载</span>
</div>
}
</div>
))}
}
</div>
{
(uploadFile.length === 0 && type) &&
(Object.keys(uploadFile).length === 0 && type) &&
<Upload
action="/api/file/file/upload"
data={{ fileType: UPLOAD_TYPE }}
......
src/pages/transaction/electronicContracts/apply/index.tsx
View file @ 2055e261
import React, { useState } from 'react'
import React, { useState, useEffect, useRef } from 'react'
import styles from './index.less'
import { Link } from 'umi';
import { history } from 'umi';
import { PageHeaderWrapper } from '@ant-design/pro-layout'
import { ExclamationCircleFilled, CheckCircleFilled, ClockCircleFilled, CloseCircleFilled } from '@ant-design/icons';
import { Descriptions, Button } from 'antd';
import div from './../../../editor/configs/componentConfigs/HTML/div';
import { PublicApi } from '@/services/api';
import Test from '../components/test'
const Apply = () => {
const ref = useRef<any>({});
/**头部状态的颜色值 */
const applyStaus = [{
status: 1,
......@@ -29,8 +32,30 @@ const Apply = () => {
icon: <CloseCircleFilled />,
color: '#D32F2F',
}]
const [num, setNum] = useState<number>(1);
const [authType, setAuthType] = useState<number>(1); // 认证方式 1-法人认证 2-经办人认证 3-个人认证
const [signatureAuthLogId, setSignatureAuthLogId] = useState<number>(0); // 电子签章认证记录id
const [data, setData] = useState<any>({});
/**电子签章认证查询 */
useEffect(() => {
PublicApi.getOrderSignatureAuthGet({}).then((res: any) => {
setData(res.data)
})
}, [])
/**电子签章认证申请 */
const AuthApply = async () => {
if(ref) {
const vaildDetail = await ref.current.validateFields();
if(vaildDetail) {
await PublicApi.postOrderSignatureAuthApply({}).then(res => {
setSignatureAuthLogId(res.data.signatureAuthLogId);
history.push(`/memberCenter/tranactionAbility/electronicContracts/enterpriseCertified?authTypeEdit=${authType}`)
})
}
}
}
return (
<PageHeaderWrapper>
......@@ -39,15 +64,17 @@ const Apply = () => {
applyStaus.map(item => (
<div key={item.status}>
{
num === item.status &&
data.state === item.status &&
<div className={styles.apply_status} style={{ backgroundColor: item.color }}>
<div>
<div className={styles.status} style={{ opacity: .6, fontSize: '12px' }}>申请状态</div>
<div className={styles.status}>{item.icon} {item.name}</div>
</div>
<div className={styles.apply_status_btn}>
<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>}
<Button size='middle' style={{ color: item.color }} onClick={AuthApply}>
{item.status === 1 ? '立即申请' : '重新申请'}
</Button>
{data.state === 3 && <Button style={{ marginLeft: '24px' }} size='middle' ghost>查看进度</Button>}
</div>
</div>
}
......@@ -57,26 +84,29 @@ const Apply = () => {
{/* 企业 */}
{(authType === 1 || authType === 2) &&
<div className={styles.apply_item}>
<Descriptions title="申请信息" column={1}>
<Descriptions.Item label="公司名称">温州市隆昌皮业有限公司</Descriptions.Item>
<Descriptions.Item label="统一社会信用代码">4324324325425435</Descriptions.Item>
<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.Item label="验证方式">-</Descriptions.Item>
</Descriptions>
</div>
<>
<div className={styles.apply_item}>
<Descriptions title="申请信息" column={1}>
<Descriptions.Item label="公司名称">{data.orgName}</Descriptions.Item>
<Descriptions.Item label="统一社会信用代码">{data.orgIdNumber}</Descriptions.Item>
<Descriptions.Item label="法人姓名">{data.proposerName}</Descriptions.Item>
<Descriptions.Item label="法人手机号">{data.proposerMobile}</Descriptions.Item>
<Descriptions.Item label="法人身份证号">{data.proposerIdNumber}</Descriptions.Item>
<Descriptions.Item label="认证方式">-</Descriptions.Item>
<Descriptions.Item label="验证方式">-</Descriptions.Item>
</Descriptions>
</div>
<Test actionRef={ref} />
</>
}
{/* 个人 */}
{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="姓名">{data.proposerName}</Descriptions.Item>
<Descriptions.Item label="手机号">{data.proposerMobile}</Descriptions.Item>
<Descriptions.Item label="身份证号">{data.proposerIdNumber}</Descriptions.Item>
<Descriptions.Item label="验证方式">-</Descriptions.Item>
</Descriptions>
</div>
......
src/pages/transaction/electronicContracts/classSearch/index.tsx
View file @ 2055e261
......@@ -27,7 +27,7 @@ const ClassSearch = () => {
const fetchData = (params?: any) => {
console.log(params)//可以直接打印参数
return new Promise((resolve, reject) => {
PublicApi.getContractParamPage({ ...params }).then(res => {
PublicApi.getOrderContractParamPage({ ...params }).then(res => {
resolve(res.data)
})
})
......
src/pages/transaction/electronicContracts/components/corporate/index.tsx
View file @ 2055e261
......@@ -7,12 +7,14 @@ import { QuestionCircleOutlined } from '@ant-design/icons';
interface queryProps {
authType: number,
authTypeFn: Function,
checkPayWayFn: Function
checkPayWayFn: Function,
data: any
}
const Corporate: React.FC<queryProps> = (props) => {
const { Option } = Select;
const { authType, authTypeFn, checkPayWayFn } = props;
const { authType, authTypeFn, checkPayWayFn, data } = props;
const [form] = Form.useForm();
const [payWay, setPayWay] = useState<number>(1); // 1.支付宝, 2.对公, 3.短信
......
src/pages/transaction/electronicContracts/components/enterpriseInfoCheck/index.tsx
View file @ 2055e261
......@@ -6,11 +6,12 @@ import { QuestionCircleOutlined } from '@ant-design/icons';
interface queryProps {
authTypeEdit: string,
authTypeFn: Function
authTypeFn: Function,
data: any
}
const EnterpriseInfoCheck: React.FC<queryProps> = (props) => {
const { authTypeEdit, authTypeFn } = props;
const { authTypeEdit, authTypeFn, data } = props;
const [authTypeBtn, setAuthTypeBtn] = useState<number>(1); // 认证方式
// 切换认证方式
const checkAuthType = (type:number) => {
......@@ -27,11 +28,11 @@ const EnterpriseInfoCheck: React.FC<queryProps> = (props) => {
<div className={styles.info_item_con}>
<div className={styles.item_con}>
<div className={styles.item_label}>公司名称：</div>
<div className={styles.item_control}>温州市隆昌皮业有限公司</div>
<div className={styles.item_control}>{data.orgName}</div>
</div>
<div className={styles.item_con}>
<div className={styles.item_label}>统一社会信用代码：</div>
<div className={styles.item_control}>4324324325425435</div>
<div className={styles.item_control}>{data.orgIdNumber}</div>
</div>
</div>
</div>
......@@ -40,15 +41,15 @@ const EnterpriseInfoCheck: React.FC<queryProps> = (props) => {
<div className={styles.info_item_con}>
<div className={styles.item_con}>
<div className={styles.item_label}>法人姓名：</div>
<div className={styles.item_control}>张三</div>
<div className={styles.item_control}>{data.proposerName}</div>
</div>
<div className={styles.item_con}>
<div className={styles.item_label}>法人手机号：</div>
<div className={styles.item_control}>+86 185 2929 6758</div>
<div className={styles.item_control}>+{data.code} {data.proposerMobile}</div>
</div>
<div className={styles.item_con}>
<div className={styles.item_label}>法人身份证号：</div>
<div className={styles.item_control}>321023 19891205 3746</div>
<div className={styles.item_control}>{data.proposerIdNumber}</div>
</div>
</div>
</div>
......
src/pages/transaction/electronicContracts/components/publicAccount/index.tsx
View file @ 2055e261
......@@ -20,7 +20,7 @@ const PublicAccount: React.FC<queryProps> = (props) => {
extra={[
<div key='key'>
<div className={styles.info_wran}>并使用支付宝首页的扫一扫功能</div>
<div className={styles.info_wran}>扫描下面的二维码，然后按照支付宝APP的</div>
<div className={styles.info_wran}>扫描下面的二维码，然后按照支付宝APP的提示进行验证</div>
<div className={styles.alipay_qrcode} />
<div className={styles.alipay_wran}>
<AlipaySquareFilled
......
src/pages/transaction/electronicContracts/components/test/index.tsx 0 → 100644
View file @ 2055e261
import React, {useEffect, useState} from 'react'
import { Result, Button, Form, Input, Select, Row, Col } from 'antd'
import styles from '../index.less'
import { AlipaySquareFilled } from '@ant-design/icons';
import { PublicApi } from '@/services/api';
interface queryProps {
actionRef?: any
}
const Test:React.FC<queryProps> = (props) => {
const {actionRef} = props;
const { Option } = Select;
const [form] = Form.useForm();
const [options,setOptions] = useState<any>([])
// 手机号码验证
const userPhoneRule = (rule, value) => {
const RegExp = /^1[345678]\d{9}$/gi;
if (!value) {
return Promise.reject(new Error('请输入您的手机号'))
}
if (!RegExp.test(value)) {
return Promise.reject(new Error('手机号码格式不正确'))
}
return Promise.resolve();
}
const hadnleValidateFields = () => {
return new Promise((resolve) => {
form.validateFields().then(values => {
const data = JSON.stringify(values);
sessionStorage.setItem('formdata', data)
console.log(values, 10086)
resolve(true)
}).catch(errorInfo => {
console.log(errorInfo)
})
})
}
useEffect(() => {
if (actionRef) {
const userAction = {
validateFields: () => hadnleValidateFields()
}
if (actionRef && typeof actionRef === 'function') {
actionRef(userAction);
}
if (actionRef && typeof actionRef !== 'function') {
actionRef.current = userAction;
}
}
PublicApi.getManageGetTelCode().then(res => {
setOptions(res.data)
})
}, [])
return (
<div className={styles.info_wrap}>
<div className={styles.info_item}>
<div className={styles.info_item_con}>
<Form form={form}>
<Form.Item label='公司名称' name='orgName' colon={false} rules={[{ required: true, message: '请输入经办人' }]}>
<Input />
</Form.Item>
<Form.Item label='统一社会信用代码' name='orgIdNumber' colon={false} rules={[{ required: true, message: '统一社会信用代码' }]}>
<Input />
</Form.Item>
<Form.Item label='法人姓名' name='proposerName' colon={false} rules={[{ required: true, message: '法人姓名' }]}>
<Input />
</Form.Item>
<Form.Item label='法人手机号' colon={false} required={true} style={{marginBottom: '0px'}}>
<Row gutter={24}>
<Col span={7}>
<Form.Item style={{ width: '150px' }} name='code' rules={[{ required: true, message: '请选择区号' }]}>
<Select style={{ width: '100%' }}>
{options.map(v => (
<Option key={v} value={v}>{v}</Option>
))}
</Select>
</Form.Item>
</Col>
<Col span={17}>
<Form.Item style={{ width: '398px' }} name='proposerMobile' rules={[{ required: true, validator: userPhoneRule, }]}>
<Input />
</Form.Item>
</Col>
</Row>
</Form.Item>
<Form.Item label='法人身份证号' name='proposerIdNumber' colon={false} rules={[{ required: true, message: '请输入身份证号码' }]}>
<Input />
</Form.Item>
</Form>
</div>
</div>
</div>
)
}
export default Test
\ No newline at end of file
src/pages/transaction/electronicContracts/enterpriseCertified/index.tsx
View file @ 2055e261
import React, { useState } from 'react'
import React, { useState, useEffect } from 'react'
import { history } from 'umi'
import ReutrnEle from '@/components/ReturnEle';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
......@@ -6,12 +6,23 @@ import StepComponents from '../components/steps'
import EnterpriseInfoCheck from '../components/enterpriseInfoCheck'
import Corporate from '../components/corporate'
import PublicAccount from '../components/publicAccount'
import { PublicApi } from '@/services/api';
const EnterpriseCertified = () => {
const { authTypeEdit } = history.location.query;
const { authTypeEdit } = history.location.query; // 认证方式 1-法人认证 2-经办人认证 3-个人认证
const [step, setStep] = useState<number>(0);
const [authType, setAuthType] = useState<number>(1);
const [payWay, setPayWay] = useState<number>(1); // 1.支付宝, 2.对公, 3.短信
const [data, setData] = useState<any>({});
/**电子签章认证查询 */
useEffect(() => {
// PublicApi.getOrderSignatureAuthGet({}).then((res:any) => {
// setData(res.data)
// })
const formdata = JSON.parse(sessionStorage.getItem('formdata'));
setData(formdata)
},[])
//认证方式切换Fn
const authTypeFn = (type: number, steps: number) => {
......@@ -34,11 +45,13 @@ const EnterpriseCertified = () => {
<EnterpriseInfoCheck
authTypeEdit={authTypeEdit}
authTypeFn={authTypeFn}
data={data}
/>
}
{step === 1 &&
<Corporate
authType={authType}
data={data}
checkPayWayFn={checkPayWayFn}
authTypeFn={authTypeFn}
/>
......
src/pages/transaction/electronicContracts/template/index.tsx
View file @ 2055e261
import React, { useState, useRef } from 'react'
import { history } from 'umi';
import React, { useState, useRef, ReactNode } from 'react'
import { history,Link } from 'umi';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import { Card, Row, Col, Input, Button, Space } from 'antd';
import { Card, Row, Col, Input, Button, Space, Popconfirm } from 'antd';
import { ColumnType } from 'antd/lib/table/interface';
import { StandardTable } from 'god';
import NiceForm from '@/components/NiceForm';
import { createFormActions } from '@formily/antd';
import EyePreview from '@/components/EyePreview';
import { PlusOutlined } from '@ant-design/icons';
import { PlusOutlined, PlayCircleOutlined, PauseCircleOutlined } from '@ant-design/icons';
import { PublicApi } from '@/services/api'
const formActions = createFormActions();
......@@ -17,32 +17,75 @@ const Template: React.FC<{}> = () => {
const columns: ColumnType<any>[] = [{
title: 'ID',
dataIndex: 'id',
width: '128px'
width: '5%'
}, {
title: '合同模板名称',
dataIndex: 'name',
width: '15%',
render: (text: any, record: any) => {
return (
<EyePreview
url={`/memberCenter/tranactionAbility/stockSellStorage/addWarehouse?id=${record.id}&preview=1`}
url={`/memberCenter/tranactionAbility/electronicContracts/addContract?id=${record.id}`}
>
名称
{text}
</EyePreview>
);
},
}, {
title: '版本号',
dataIndex: 'version',
width: '10%',
}, {
title: '模板说明',
dataIndex: 'description',
width: '35%',
}, {
title: '状态',
dataIndex: 'status',
dataIndex: 'state',
width: '20%',
sorter: (a, b) => a.state - b.state,
render: (text: any, record: any) => {
let component: ReactNode = null
component = (
<Popconfirm
title="确定要执行这个操作?"
onConfirm={() => confirm(record)}
okText="是"
cancelText="否"
>
<Button
type="link"
style={record.state ? { color: '#00B37A' } : { color: 'red' }}>{record.state ? <>有效 <PlayCircleOutlined /></> : <>无效 <PauseCircleOutlined /></>}</Button>
</Popconfirm>
)
return component
}
}, {
title: '操作',
dataIndex: 'action',
width: '20%',
render: (text: any, record: any) => {
let component: ReactNode = null
component = (
<>
<Button disabled={record.state === 1} style={{padding: '0px', marginRight: '24px'}} type='link'><Link to={`/memberCenter/tranactionAbility/electronicContracts/addContract?type=edit&id=${record.id}`}>编辑</Link></Button>
<Popconfirm
title="确定要执行这个操作?"
onConfirm={() => confirmDel(record)}
okText="是"
cancelText="否"
disabled={record.state === 1}
>
<Button
disabled={record.state === 1}
style={{padding: '0px'}}
type="link"
>删除</Button>
</Popconfirm>
</>
)
return component
}
}]
// 模拟请求
......@@ -78,6 +121,23 @@ const Template: React.FC<{}> = () => {
</Space>
);
/**合同模板停用/启用 */
const confirm = (recode: any) => {
PublicApi.postOrderContractTemplateEnable({
id: recode.id,
state: recode.state === 1 ? 0 : 1,
}).then(res => {
ref.current.reload()
})
}
/**删除 */
const confirmDel = (recode: any) => {
PublicApi.postOrderContractTemplateDelete({id: recode.id}).then(res => {
ref.current.reload()
})
}
return (
<PageHeaderWrapper>
<Card>
......
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