Skip to content

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

电子合同页面布局

parent ad928b55
Hide whitespace changes
Inline Side-by-side
Showing with 556 additions and 9 deletions
config/routes/tranactionRoute.ts
View file @ 3b4a28d2
......@@ -3,7 +3,7 @@
* @Date: 2020-07-31 19:56:22
* @LastEditors: jiaxin
* @Copyright: 1549414730@qq.com
* @LastEditTime: 2020-09-21 18:32:55
* @LastEditTime: 2020-09-22 16:34:19
*/
const TranactionRoute = {
......@@ -36,6 +36,18 @@ const TranactionRoute = {
path: '/memberCenter/tranactionAbility/electronicContracts/template',
name: 'template',
component: '@/pages/transaction/electronicContracts/template/index',
},
{
path: '/memberCenter/tranactionAbility/electronicContracts/enterpriseCertified',
name: 'enterpriseCertified',
hideInMenu: true,
component: '@/pages/transaction/electronicContracts/enterpriseCertified/index',
},
{
path: '/memberCenter/tranactionAbility/electronicContracts/personalCertified',
name: 'personalCertified',
hideInMenu: true,
component: '@/pages/transaction/electronicContracts/personalCertified/index',
}
]
},
......
src/locales/zh-CN/menu.ts
View file @ 3b4a28d2
......@@ -2,7 +2,7 @@
* @Author: LeeJiancong
* @Date: 2020-07-13 14:08:50
* @LastEditors: jiaxin
* @LastEditTime: 2020-09-21 18:33:27
* @LastEditTime: 2020-09-22 16:35:11
*/
export default {
......@@ -116,6 +116,8 @@ export default {
//电子合同
'menu.tranactionAbility.electronicContracts': '电子合同',
'menu.tranactionAbility.electronicContracts.apply': '电子签章申请',
'menu.tranactionAbility.electronicContracts.enterpriseCertified': '企业信息核验',
'menu.tranactionAbility.electronicContracts.personalCertified': '个人信息核验',
'menu.tranactionAbility.electronicContracts.classSearch': '合同模板参数查询',
'menu.tranactionAbility.electronicContracts.template': '合同模板',
//进销存
......
src/pages/transaction/electronicContracts/apply/index.less 0 → 100644
View file @ 3b4a28d2
.apply_info {
.apply_status {
padding: 24px;
border-radius: 8px;
margin-bottom: 24px;
display: flex;
align-items: center;
.status {
color: #FFFFFF;
font-size: 16px;
width: 195px;
}
.apply_status_btn {
&>button {
&:first-child {
margin-right: 24px;
}
}
}
}
&>.apply_item {
padding: 24px;
border-radius: 8px;
background-color: #FFF;
:global {
.ant-descriptions-item-label {
color: #909399;
width: 200px;
}
}
}
}
\ No newline at end of file
src/pages/transaction/electronicContracts/apply/index.tsx
View file @ 3b4a28d2
import React from 'react'
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import styles from './index.less'
import { Link } 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';
const Apply = () => {
/**头部状态的颜色值 */
const applyStaus = [{
status: 1,
name: '未申请',
icon: <ExclamationCircleFilled />,
color: '#6B778C',
}, {
status: 2,
name: '申请通过',
icon: <CheckCircleFilled />,
color: '#00B37A',
}, {
status: 3,
name: '申请中',
icon: <ClockCircleFilled />,
color: '#4279DF',
}, {
status: 4,
name: '申请不通过',
icon: <CloseCircleFilled />,
color: '#D32F2F',
}]
const num = 1
return (
<PageHeaderWrapper>
<div>123</div>
<div className={styles.apply_info}>
{
applyStaus.map(item => (
<div key={item.status}>
{
num === 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`}><Button size='middle' style={{ color: item.color }}>{item.status === 1 ? '立即申请' : '重新申请'}</Button></Link>
{item.status === 3 && <Button size='middle' ghost>查看进度</Button>}
</div>
</div>
}
</div>
))
}
<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>
</PageHeaderWrapper>
)
}
......
src/pages/transaction/electronicContracts/classSearch/index.tsx
View file @ 3b4a28d2
import React 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';
const ClassSearch = () => {
//表头
const columns: ColumnType<any>[] = [{
title: 'ID',
dataIndex: 'id',
width: '128px'
}, {
title: '参数名称',
dataIndex: 'name',
}, {
title: '参数描述',
dataIndex: 'describe',
}, {
title: '状态',
dataIndex: 'status',
}]
return (
<PageHeaderWrapper>
<div>123</div>
<Card>
<StandardTable
tableProps={{
rowKey: 'id',
}}
columns={columns}
controlRender={
<Row>
<Col span={12}>
<Input.Search
style={{ width: '256px',marginRight: '24px',marginBottom: '24px' }}
placeholder='搜索'
/>
<Button>重置</Button>
</Col>
</Row>
}
/>
</Card>
</PageHeaderWrapper>
)
}
......
src/pages/transaction/electronicContracts/components/alipay/index.tsx 0 → 100644
View file @ 3b4a28d2
import React from 'react'
import { Result } from 'antd'
import styles from '../index.less'
const Alipay = () => {
return(
<div className={styles.info_wrap}>
<Result
title="请使用法人手机号注册的支付宝账号登录支付"
extra={[
<div className={styles.info_wran}>并使用支付宝首页的扫一扫功能</div>,
<div className={styles.info_wran}>扫描下面的二维码，然后按照支付宝APP的</div>,
<div className={styles.alipay_qrcode} />,
<div><AlipayCircleOutlined />支付宝扫一扫</div>
]}
/>
</div>
)
}
export default Alipay
src/pages/transaction/electronicContracts/components/corporate/index.tsx 0 → 100644
View file @ 3b4a28d2
import React from 'react'
import { Button, Row, Col } from 'antd'
import styles from '../index.less'
import cx from 'classnames'
import { QuestionCircleOutlined } from '@ant-design/icons';
const Corporate = () => {
return(
<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>
)
}
export default Corporate
src/pages/transaction/electronicContracts/components/enterpriseInfoCheck/index.tsx 0 → 100644
View file @ 3b4a28d2
import React 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 = () => {
return (
<div className={styles.info_wrap}>
<div className={styles.info_item}>
<div className={styles.info_item_title}>企业信息核验</div>
<div className={styles.info_item_con}>
<div className={styles.item_con}>
<div className={styles.item_label}>公司名称：</div>
<div className={styles.item_control}>温州市隆昌皮业有限公司</div>
</div>
<div className={styles.item_con}>
<div className={styles.item_label}>统一社会信用代码：</div>
<div className={styles.item_control}>4324324325425435</div>
</div>
</div>
</div>
<div className={styles.info_item}>
<div className={styles.info_item_title}>法人信息核验</div>
<div className={styles.info_item_con}>
<div className={styles.item_con}>
<div className={styles.item_label}>法人姓名：</div>
<div className={styles.item_control}>张三</div>
</div>
<div className={styles.item_con}>
<div className={styles.item_label}>法人手机号：</div>
<div className={styles.item_control}>+86 185 2929 6758</div>
</div>
<div className={styles.item_con}>
<div className={styles.item_label}>法人身份证号：</div>
<div className={styles.item_control}>321023 19891205 3746</div>
</div>
</div>
</div>
<div className={cx(styles.info_item, styles.info_dashed)}>
<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>
</div>
</div>
</div>
</div>
</div>
)
}
export default EnterpriseInfoCheck
\ No newline at end of file
src/pages/transaction/electronicContracts/components/index.less 0 → 100644
View file @ 3b4a28d2
.info_wrap {
padding: 24px;
min-height: 668px;
border-top: #EEF0F3 solid 1px;
background-color: #FFFFFF;
:global {
.ant-result-icon {
display: none;
}
}
.info_wran {
color: #909399;
font-size: 14px;
padding-bottom: 8px;
}
.alipay_qrcode {
width: 240px;
height: 240px;
margin: 24px auto !important;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid #EBECF0;
box-sizing: border-box;
}
.info_item {
.info_item_title {
position: relative;
padding: 12px 0px 12px 8px;
font-size: 14px;
color: #606266;
border-bottom: 1px solid #EEF0F3;
&::after {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
margin: auto;
height: 16px;
width: 2px;
background-color: #00B37A;
}
}
.info_item_con {
padding: 12px 0px;
.item_con {
padding: 12px 0px;
display: flex;
font-size: 14px;
.item_label {
width: 176px;
color: #909399;
}
.item_control {
color: #303133;
button {
&:last-child {
margin-left: 24px;
}
}
}
}
}
.card_checkbox {
display: flex;
flex-wrap: wrap;
}
.card_checkbox_item {
min-width: 112px;
height: 32px;
margin-right: 32px;
margin-bottom: 16px;
border: 1px solid rgba(235, 236, 240, 1);
padding: 0 16px;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}
.card_checkbox_item.active {
border-color: #00B382;
position: relative;
color: #00B382;
}
.card_checkbox_item.active::after {
content: '';
position: absolute;
bottom: 0;
right: 0;
width: 0;
height: 0;
border: 6px solid transparent;
border-right: 6px solid #00B382;
border-bottom: 6px solid #00B382;
}
}
.info_dashed {
position: relative;
&::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
margin: auto;
width: 96%;
border-top: 1px dashed #EBECF0;
}
}
}
src/pages/transaction/electronicContracts/components/steps/index.less 0 → 100644
View file @ 3b4a28d2
.step_info {
padding: 24px 128px;
background-color: #FAFBFC;
:global {
.ant-steps-item-finish {
.ant-steps-item-icon {
background-color: #00B37A;
.ant-steps-icon {
color: #FFFFFF;
}
}
}
.ant-steps-item-wait {
.ant-steps-item-icon {
background-color: #DFE1E6;
border-color: #DCDCDC;
.ant-steps-icon {
color: #606266;
}
}
}
}
}
\ No newline at end of file
src/pages/transaction/electronicContracts/components/steps/index.tsx 0 → 100644
View file @ 3b4a28d2
import React from 'react'
import styles from './index.less'
import { Steps } from 'antd'
const { Step } = Steps;
const StepComponents = () => {
return (
<div className={styles.step_info}>
<Steps size="small" current={0}>
<Step title="企业信息核验" />
<Step title="经办人/法人认证" />
<Step title="企业认证" />
</Steps>
</div>
)
}
export default StepComponents
\ No newline at end of file
src/pages/transaction/electronicContracts/enterpriseCertified/index.tsx 0 → 100644
View file @ 3b4a28d2
import React 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'
const EnterpriseCertified = () => {
return (
<PageHeaderWrapper
onBack={() => history.goBack()}
backIcon={<ReutrnEle description="返回" />}
>
<StepComponents />
<EnterpriseInfoCheck />
<Corporate />
<Alipay />
</PageHeaderWrapper>
)
}
export default EnterpriseCertified
src/pages/transaction/electronicContracts/personalCertified/index.tsx 0 → 100644
View file @ 3b4a28d2
import React from 'react'
import { history } from 'umi'
import ReutrnEle from '@/components/ReturnEle';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
const PersonalCertified = () => {
return (
<PageHeaderWrapper
onBack={() => history.goBack()}
backIcon={<ReutrnEle description="返回" />}
>
<div>123</div>
</PageHeaderWrapper>
)
}
export default PersonalCertified
\ No newline at end of file
src/pages/transaction/electronicContracts/template/index.tsx
View file @ 3b4a28d2
import React 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 EyePreview from '@/components/EyePreview';
import { PlusOutlined } from '@ant-design/icons';
const Template = () => {
//表头
const columns: ColumnType<any>[] = [{
title: 'ID',
dataIndex: 'id',
width: '128px'
}, {
title: '合同模板名称',
dataIndex: 'name',
render: (text: any, record: any) => {
return (
<EyePreview
url={`/memberCenter/tranactionAbility/stockSellStorage/addWarehouse?id=${record.id}&preview=1`}
>
名称
</EyePreview>
);
},
}, {
title: '版本号',
dataIndex: 'version',
}, {
title: '模板说明',
dataIndex: 'description',
}, {
title: '状态',
dataIndex: 'status',
sorter: (a, b) => a.state - b.state,
}, {
title: '操作',
dataIndex: 'action',
}]
return (
<PageHeaderWrapper>
<div>123</div>
<Card>
<StandardTable
tableProps={{
rowKey: 'id',
}}
columns={columns}
controlRender={
<Row justify='space-between'>
<Col>
<Button type='primary'><PlusOutlined />新增</Button>
</Col>
<Col>
<Input.Search
style={{ width: '256px',marginRight: '24px',marginBottom: '24px' }}
placeholder='搜索'
/>
<Button>重置</Button>
</Col>
</Row>
}
/>
</Card>
</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