Skip to content

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

新建合同模板

parent 65e54c08
Hide whitespace changes
Inline Side-by-side
Showing with 324 additions and 58 deletions
config/routes/tranactionRoute.ts
View file @ 4079439e
......@@ -48,6 +48,12 @@ const TranactionRoute = {
name: 'personalCertified',
hideInMenu: true,
component: '@/pages/transaction/electronicContracts/personalCertified/index',
},
{
path: '/memberCenter/tranactionAbility/electronicContracts/addContract',
name: 'addContract',
hideInMenu: true,
component: '@/pages/transaction/electronicContracts/addContract/index',
}
]
},
......
src/locales/zh-CN/menu.ts
View file @ 4079439e
......@@ -120,6 +120,7 @@ export default {
'menu.tranactionAbility.electronicContracts.personalCertified': '个人信息核验',
'menu.tranactionAbility.electronicContracts.classSearch': '合同模板参数查询',
'menu.tranactionAbility.electronicContracts.template': '合同模板',
'menu.tranactionAbility.electronicContracts.addContract': '新建合同模板',
//进销存
'menu.tranactionAbility.stockSellStorage': '进销存',
'menu.tranactionAbility.stockSellStorage.warehouse': '仓库',
......
src/pages/transaction/electronicContracts/addContract/index.less 0 → 100644
View file @ 4079439e
.addcontract_wrap {
:global {
.ant-form-item {
width: 748px;
.ant-form-item-label {
width: 172px;
text-align: left;
& > label {
color: #6B778C;
}
}
.ant-upload-list-item {
margin-top: 0px;
}
}
}
.upload_item {
padding: 5px 8px;
margin-bottom: 16px;
display: flex;
align-items: center;
justify-content: space-between;
background-color: #FAFBFC;
.upload_left {
display: flex;
align-items: center;
color: #172B4D;
:global {
.anticon-file-word {
color: #4279df;
font-size: 20px;
margin-right: 8px;
}
}
}
.upload_right {
color: #00B37A;
cursor: pointer;
:global {
.anticon-delete {
margin-left: 19px;
color: #97A0AF;
}
}
}
}
}
\ No newline at end of file
src/pages/transaction/electronicContracts/addContract/index.tsx 0 → 100644
View file @ 4079439e
import React, { useEffect } from 'react'
import { history } from 'umi'
import { Form, Input, Upload, Card, Tooltip, Button, message } from 'antd'
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import ReutrnEle from '@/components/ReturnEle';
import { PublicApi } from '@/services/api'
import { UploadFile, UploadChangeParam } from 'antd/lib/upload/interface';
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 { TextArea } = Input;
/**判断文件类型和大小 */
const beforeDocUpload = (file: UploadFile) => {
const isJpgOrPng = file.type === 'application/msword' || file.type === 'application/vnd.openxmlformats-officedocument.wordprocessingml.document';
if (!isJpgOrPng) {
message.error('doc/docx文件!');
}
const isLt20M = file.size / 1024 / 1024 < 20;
if (!isLt20M) {
message.error('上传文件大小不超过 20M!');
}
return isJpgOrPng && isLt20M;
}
/**上传回调 */
const handleChange = ({ fileList }) => {
console.log(fileList, 10086)
}
return (
<PageHeaderWrapper
onBack={() => history.goBack()}
backIcon={<ReutrnEle description="返回" />}
>
<Card>
<div className={styles.addcontract_wrap}>
<Form>
<Form.Item label='合同模板名称' colon={false} name='name'>
<Input />
</Form.Item>
<Form.Item label='版本号' colon={false} name='version'>
<Input />
</Form.Item>
<Form.Item label='合同模板说明' colon={false} name='description'>
<TextArea rows={4} />
</Form.Item>
<Form.Item label={<div>合同文件模板样例&nbsp;<Tooltip placement="top" title='制作合同模板前，可下载合同模板样例，按照样例指引制作合同模板，其中需要添加的参数可以在合同模板参数查询中查找。'><QuestionCircleOutlined /></Tooltip></div>} colon={false} name='fileExampleUrl'>
<div className={styles.upload_item}>
<div className={styles.upload_left}>
<FileWordFilled />
<span>合同模板样例.doc</span>
</div>
<div className={styles.upload_right}>
<span>下载</span>
</div>
</div>
</Form.Item>
<Form.Item label={<div>合同文件模板&nbsp;<Tooltip placement="top" title='制作完成的合同模板，需要上传至平台，才能在后续的订单中签订电子合同'><QuestionCircleOutlined /></Tooltip></div>} colon={false} name='fileUrl'>
<div className={styles.upload_data}>
<div className={styles.upload_item}>
<div className={styles.upload_left}>
<FileWordFilled />
<span>合同模板样例.doc</span>
</div>
<div className={styles.upload_right}>
<span>预览</span>
<DeleteOutlined />
</div>
</div>
</div>
<Upload
action="/api/file/file/upload"
data={{ fileType: UPLOAD_TYPE }}
showUploadList={false}
beforeUpload={beforeDocUpload}
onChange={handleChange}
accept='.doc,.docx'
>
<Button icon={<UploadOutlined />}>上传文件</Button>
<div style={{ marginTop: '8px' }}>支持扩展名：.doc，文件大小不超过 20M</div>
</Upload>
</Form.Item>
<Form.Item>
<Button type="primary">保存</Button>
<Button>取消</Button>
</Form.Item>
</Form>
</div>
</Card>
</PageHeaderWrapper>
)
}
export default AddContract
\ No newline at end of file
src/pages/transaction/electronicContracts/components/enterpriseInfoCheck/index.tsx
View file @ 4079439e
......@@ -6,57 +6,86 @@ 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 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>
<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 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 className={styles.item_con}>
<div className={styles.item_label}>法人身份证号：</div>
<div className={styles.item_control}>321023 19891205 3746</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>
<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 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>
<div className={styles.item_con}>
<div className={styles.item_label}></div>
<div className={styles.item_control}>
<Button type='primary'>下一步</Button>
<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 className={styles.item_con}>
<div className={styles.item_label}></div>
<div className={styles.item_control}>
<Button type='primary'>下一步</Button>
</div>
</div>
</div>
</div>
</div>
</div>
</>
)
}
......
src/pages/transaction/electronicContracts/components/publicAccount/index.tsx
View file @ 4079439e
import React from 'react'
import { Result, Button, Form, Input } from 'antd'
import { Result, Button, Form, Input, Row, Col } from 'antd'
import styles from '../index.less'
const PublicAccount = () => {
......@@ -90,9 +90,20 @@ const PublicAccount = () => {
<div>法人手机号：</div>
<div>+86 186 7700 2345</div>
</div>
<Form>
<Form style={{width: '338px', margin: 'auto'}}>
<Form.Item noStyle>
<Input placeholder='请输入您收到的转账金额' />
<Row gutter={6}>
<Col span={16}>
<Form.Item name='code' rules={[{ required: true, message: '请输入短信验证码' }]}>
<Input placeholder='请输入您收到的转账金额' />
</Form.Item>
</Col>
<Col span={8}>
<Button>获取验证码</Button>
</Col>
</Row>
</Form.Item>
</Form>
<div className={styles.bank_btn} style={{ textAlign: 'center' }}>
......
src/pages/transaction/electronicContracts/template/index.tsx
View file @ 4079439e
import React from 'react'
import React, { useState, useRef } from 'react'
import { history } from 'umi';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import { Card, Row, Col, Input, Button } from 'antd';
import { Card, Row, Col, Input, Button, Space } 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 { PublicApi } from '@/services/api'
const formActions = createFormActions();
const Template = () => {
const Template: React.FC<{}> = () => {
const ref = useRef<any>({});
//表头
const columns: ColumnType<any>[] = [{
title: 'ID',
......@@ -39,6 +45,39 @@ const Template = () => {
dataIndex: 'action',
}]
// 模拟请求
const fetchData = (params?: any) => {
console.log(params)//可以直接打印参数
return new Promise((resolve, reject) => {
PublicApi.getOrderContractTemplatePage({ ...params }).then(res => {
resolve(res.data)
})
})
}
const handleJumpAdd = () => {
history.push({
pathname:
'/memberCenter/tranactionAbility/electronicContracts/addContract',
query: {
type: 'add',
},
});
};
const Actions = (
<Space>
<Button
type="primary"
icon={<PlusOutlined />}
onClick={handleJumpAdd}
>
新建
</Button>
</Space>
);
return (
<PageHeaderWrapper>
<Card>
......@@ -47,19 +86,48 @@ const Template = () => {
rowKey: 'id',
}}
columns={columns}
currentRef={ref}
fetchTableData={(params: any) => fetchData(params)}
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>
<NiceForm
actions={formActions}
expressionScope={{
Actions,
}}
effects={($, actions) => {
}}
schema={{
type: 'object',
properties: {
searchWrap: {
type: 'object',
'x-component': 'Mega-Layout',
'x-component-props': {
grid: true,
},
properties: {
actions: {
type: 'object',
'x-component': 'Children',
'x-component-props': {
children: '{{Actions}}',
},
},
name: {
type: 'string',
'x-component': 'Search',
'x-component-props': {
placeholder: '搜索',
advanced: false,
},
},
},
},
},
}}
onSubmit={values => ref.current.reload(values)}
/>
}
/>
</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