Skip to content

J
jinfa-platform
Commit 219bb09e authored by shenshaokai's avatar shenshaokai
Browse files
Options

Merge branch 'jinfa-20221102' into 'jinfa-20221102'

fix: 变更合同采购订单-基本信息-展示变更前后数据 See merge request project/jinfa-platform!451
parents 50537a3c c92d1841
Hide whitespace changes
Inline Side-by-side
Showing with 252 additions and 140 deletions
src/pages/contract/components/detailCard/basic/index.tsx
View file @ 219bb09e
import React, { useState } from 'react';
import {
Row,
Col,
} from 'antd';
import StatusTag from '@/components/StatusTag';
import style from '../index.less';
import { IAntdSchemaFormProps } from '@formily/antd'
import React, { useState } from 'react'
import { Row, Col, Tooltip } from 'antd'
import StatusTag from '@/components/StatusTag'
import style from '../index.less'
import type { IAntdSchemaFormProps } from '@formily/antd'
import { getIntl, history } from 'umi'
const intl = getIntl();
import change from '@/assets/imgs/change.png'
import cx from 'classnames'
const intl = getIntl()
export interface Iprops extends IAntdSchemaFormProps {
/* 显示隐藏 */
basicInfo: any,
basicInfo: any
}
const Basic: React.FC<Iprops> = ({
basicInfo
}) => {
const Basic: React.FC<Iprops> = ({ basicInfo }) => {
const [isNew, setIsNew] = useState<boolean>(true)
const tooltipHtml = (item) => {
return (
<div className={style.tooltip}>
<div className={style.header}>
<img className={style.img} src={change} />
{`数据变更${isNew ? '前' : '后'}`}
</div>
<div className={style.text}>{item}</div>
</div>
)
}
const handleBtnChange = (data: boolean) => {
setIsNew(data)
}
return (
<div id='process' className='ant-card ant-card-bordered'>
<div className='ant-card-head'>
<div className='ant-card-head-wrapper'>
<div className='ant-card-head-wrapper'>
{intl.formatMessage({id: 'contract.jibenxinxi'})}
<div id="process" className="ant-card ant-card-bordered">
<div className="ant-card-head">
<div className={cx(style.flex, 'ant-card-head-wrapper')}>
<div className="ant-card-head-wrapper">
{intl.formatMessage({ id: 'contract.jibenxinxi' })}
</div>
{basicInfo?.col1[0]?.old ? (
<div className={style.changeBtn}>
<div
className={cx(style.btn, !isNew ? style.active : '')}
onClick={() => handleBtnChange(false)}
>
变更前
</div>
<div
className={cx(style.btn, isNew ? style.active : '')}
onClick={() => handleBtnChange(true)}
>
变更后
</div>
</div>
) : null}
</div>
</div>
<div className='ant-card-body'>
<div className="ant-card-body">
<Row gutter={[12, 12]}>
<Col span={12}>
{basicInfo.col1.map((item: any, index: number) => (
<div className={style.list} key={`col1_${index + 1}`}>
<h5 className={style.listLable}>{item.label}</h5>
{
item.url ?
<h5 className={style.gesture} onClick={() => history.push(item.url)}>{item.extra}</h5>
:
item.List ?
<div>
{
item.extra.map((items) => {
console.log(items.number + '(' + items.invoiceDate + ')')
return (
<p>{items.invoiceDate + '(' + items.number + ')'}</p>
)
})
}
</div> :
item.type == 'StatusTag' ? <StatusTag type="success" title={item.extra} /> : <h5 className={style.listContent}>{item.extra}</h5>
}
{item.url ? (
<h5 className={style.gesture} onClick={() => history.push(item.url)}>
{item.extra}
</h5>
) : item.List ? (
<div>
{item.extra.map((items) => {
console.log(items.number + '(' + items.invoiceDate + ')')
return <p>{items.invoiceDate + '(' + items.number + ')'}</p>
})}
</div>
) : item.type == 'StatusTag' ? (
<StatusTag type="success" title={item.extra} />
) : (
<div className={style.extra}>
<h5 className={style.listContent}>
{isNew || !item.old ? item.extra : item.old}
</h5>
{item.old ? (
<Tooltip
color={'#ffffff'}
title={() => tooltipHtml(!isNew ? item.extra : item.old)}
>
<img className={style.img} src={change} />
</Tooltip>
) : null}
</div>
)}
</div>
))}
</Col>
......@@ -59,13 +99,25 @@ const Basic: React.FC<Iprops> = ({
<div className={style.list} key={`col2_${index + 1}`}>
<h5 className={style.listLable}>{item.label}</h5>
{
item.url
?
<h5 className={style.gesture} onClick={() => history.push(item.url)}>{item.extra}</h5>
:
<h5 className={style.listContent}>{item.extra}</h5>
}
{item.url ? (
<h5 className={style.gesture} onClick={() => history.push(item.url)}>
{item.extra}
</h5>
) : (
<div className={style.extra}>
<h5 className={style.listContent}>
{isNew || !item.old ? item.extra : item.old}
</h5>
{item.old ? (
<Tooltip
color={'#ffffff'}
title={() => tooltipHtml(!isNew ? item.extra : item.old)}
>
<img className={style.img} src={change} />
</Tooltip>
) : null}
</div>
)}
</div>
))}
</Col>
......@@ -87,6 +139,6 @@ Basic.defaultProps = {
col1: [],
col2: [],
col3: [],
}
},
}
export default Basic;
export default Basic
src/pages/contract/components/detailCard/index.less
View file @ 219bb09e
......@@ -15,7 +15,7 @@
}
.ant-anchor-link-active {
position: relative;
border-bottom: 2px solid #00B37A;
border-bottom: 2px solid #00b37a;
box-sizing: border-box;
.ant-anchor-link-title {
font-weight: 500;
......@@ -23,7 +23,6 @@
}
}
}
}
.titleBox {
padding: 8px 16px;
......@@ -55,8 +54,8 @@
}
.ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled) {
color: #fff;
background: #6B778C;
border-color: #6B778C;
background: #6b778c;
border-color: #6b778c;
}
}
}
......@@ -64,89 +63,87 @@
margin-bottom: 0;
}
}
}
.list {
display: flex;
margin-bottom: 1.5em;
h5 {
.list {
display: flex;
margin-bottom: 1.5em;
h5 {
}
.listLable {
flex: 0 0 25%;
margin-right: 8px;
color: #909399;
}
}
.listItem {
display: flex;
.label {
flex: 0.2;
padding: 0 16px;
background: linear-gradient(270deg, #ffffff 0%, #daf2e7 100%);
}
.text {
padding: 0px 0px;
flex: 1;
}
p {
margin-bottom: 0;
}
}
}
.listLable {
flex: 0 0 25%;
margin-right: 8px;
.warp {
display: flex;
width: 100%;
.warp_item {
width: 20%;
border: 1px solid #f4f5f7;
border-radius: 10px;
padding: 16px;
margin-right: 10px;
.title {
font-size: 12px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #909399;
}
}
.listItem {
display: flex;
.label {
flex: 0.2;
padding: 0 16px;
background: linear-gradient(270deg, #ffffff 0%, #daf2e7 100%);
.proportion {
font-size: 24px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #303133;
padding: 12px 0;
}
.text {
padding: 0px 0px;
flex: 1;
.Price {
font-size: 16px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #303133;
}
p {
margin-bottom: 0;
.warp_List {
margin-top: 32px;
.warp_ListItem {
display: flex;
margin-bottom: 16px;
.label {
font-size: 12px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #909399;
flex: 0.5;
}
.text {
font-size: 12px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #303133;
flex: 1;
}
}
}
}
}
.warp{
display: flex;
width: 100%;
.warp_item{
width: 20%;
border: 1px solid #F4F5F7;
border-radius: 10px;
padding: 16px;
margin-right: 10px;
.title{
font-size: 12px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #909399;
}
.proportion{
font-size: 24px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #303133;
padding: 12px 0;
}
.Price{
font-size: 16px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #303133;
}
.warp_List{
margin-top: 32px;
.warp_ListItem{
display: flex;
margin-bottom: 16px;
.label{
font-size: 12px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #909399;
flex: 0.5;
}
.text{
font-size: 12px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #303133;
flex: 1;
}
}
}
}
}
.upload_item {
.upload_item {
margin-bottom: 16px;
display: flex;
align-items: center;
......@@ -176,30 +173,93 @@
}
}
}
}
.gesture{
color: #00B37A;
cursor:pointer;
}
.wrapper{
:global {
.gesture {
color: #00b37a;
cursor: pointer;
}
.wrapper {
:global {
// 处理高级筛选input和search按钮不对齐问题、search按钮背景
.ant-input-search {
.ant-input-group {
.ant-input {
padding: 0px !important;
.ant-input-search {
.ant-input-group {
.ant-input {
padding: 0px !important;
}
}
}
.ant-input-group-addon {
.ant-input-search-button {
background-color: #F7F8FA;
.ant-input-group-addon {
.ant-input-search-button {
background-color: #f7f8fa;
}
}
}
}
}
.flex {
display: flex;
justify-content: space-between;
.changeBtn {
display: flex;
.btn {
width: 52px;
height: 24px;
margin-right: 4px;
color: #5c626a;
font-size: 12px;
line-height: 24px;
text-align: center;
background: #f5f6f7;
border-radius: 4px;
}
.active {
color: #00a98f;
background: #ebf9f6;
}
}
}
.extra {
display: flex;
flex: 1;
justify-content: space-between;
margin-right: 128px;
.img {
width: 16px;
height: 16px;
}
}
.tooltip {
padding: 10px 8px;
:global {
.ant-tooltip-inner {
padding: 0 !important;
}
}
.header {
display: flex;
color: #262626;
font-size: 14px;
.img {
width: 20px;
height: 20px;
margin-right: 8px;
}
}
.text {
margin-top: 12px;
color: #5c626a;
font-size: 12px;
}
}
.flex {
......
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