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 React, { useState } from 'react'
import { import { Row, Col, Tooltip } from 'antd'
Row, import StatusTag from '@/components/StatusTag'
Col, import style from '../index.less'
} from 'antd'; import type { IAntdSchemaFormProps } from '@formily/antd'
import StatusTag from '@/components/StatusTag';
import style from '../index.less';
import { IAntdSchemaFormProps } from '@formily/antd'
import { getIntl, history } from 'umi' 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 { export interface Iprops extends IAntdSchemaFormProps {
/* 显示隐藏 */ /* 显示隐藏 */
basicInfo: any, basicInfo: any
} }
const Basic: React.FC<Iprops> = ({ const Basic: React.FC<Iprops> = ({ basicInfo }) => {
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 ( return (
<div id='process' className='ant-card ant-card-bordered'> <div id="process" className="ant-card ant-card-bordered">
<div className='ant-card-head'> <div className="ant-card-head">
<div className='ant-card-head-wrapper'> <div className={cx(style.flex, 'ant-card-head-wrapper')}>
<div className='ant-card-head-wrapper'> <div className="ant-card-head-wrapper">
{intl.formatMessage({id: 'contract.jibenxinxi'})} {intl.formatMessage({ id: 'contract.jibenxinxi' })}
</div> </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> </div>
<div className='ant-card-body'> <div className="ant-card-body">
<Row gutter={[12, 12]}> <Row gutter={[12, 12]}>
<Col span={12}> <Col span={12}>
{basicInfo.col1.map((item: any, index: number) => ( {basicInfo.col1.map((item: any, index: number) => (
<div className={style.list} key={`col1_${index + 1}`}> <div className={style.list} key={`col1_${index + 1}`}>
<h5 className={style.listLable}>{item.label}</h5> <h5 className={style.listLable}>{item.label}</h5>
{ {item.url ? (
item.url ? <h5 className={style.gesture} onClick={() => history.push(item.url)}>
<h5 className={style.gesture} onClick={() => history.push(item.url)}>{item.extra}</h5> {item.extra}
: </h5>
item.List ? ) : item.List ? (
<div> <div>
{ {item.extra.map((items) => {
item.extra.map((items) => { console.log(items.number + '(' + items.invoiceDate + ')')
console.log(items.number + '(' + items.invoiceDate + ')') return <p>{items.invoiceDate + '(' + items.number + ')'}</p>
return ( })}
<p>{items.invoiceDate + '(' + items.number + ')'}</p> </div>
) ) : item.type == 'StatusTag' ? (
}) <StatusTag type="success" title={item.extra} />
} ) : (
<div className={style.extra}>
</div> : <h5 className={style.listContent}>
item.type == 'StatusTag' ? <StatusTag type="success" title={item.extra} /> : <h5 className={style.listContent}>{item.extra}</h5> {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> </div>
))} ))}
</Col> </Col>
...@@ -59,13 +99,25 @@ const Basic: React.FC<Iprops> = ({ ...@@ -59,13 +99,25 @@ const Basic: React.FC<Iprops> = ({
<div className={style.list} key={`col2_${index + 1}`}> <div className={style.list} key={`col2_${index + 1}`}>
<h5 className={style.listLable}>{item.label}</h5> <h5 className={style.listLable}>{item.label}</h5>
{ {item.url ? (
item.url <h5 className={style.gesture} onClick={() => history.push(item.url)}>
? {item.extra}
<h5 className={style.gesture} onClick={() => history.push(item.url)}>{item.extra}</h5> </h5>
: ) : (
<h5 className={style.listContent}>{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> </div>
))} ))}
</Col> </Col>
...@@ -87,6 +139,6 @@ Basic.defaultProps = { ...@@ -87,6 +139,6 @@ Basic.defaultProps = {
col1: [], col1: [],
col2: [], col2: [],
col3: [], col3: [],
} },
} }
export default Basic; export default Basic
src/pages/contract/components/detailCard/index.less
View file @ 219bb09e
...@@ -15,7 +15,7 @@ ...@@ -15,7 +15,7 @@
} }
.ant-anchor-link-active { .ant-anchor-link-active {
position: relative; position: relative;
border-bottom: 2px solid #00B37A; border-bottom: 2px solid #00b37a;
box-sizing: border-box; box-sizing: border-box;
.ant-anchor-link-title { .ant-anchor-link-title {
font-weight: 500; font-weight: 500;
...@@ -23,7 +23,6 @@ ...@@ -23,7 +23,6 @@
} }
} }
} }
} }
.titleBox { .titleBox {
padding: 8px 16px; padding: 8px 16px;
...@@ -55,8 +54,8 @@ ...@@ -55,8 +54,8 @@
} }
.ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled) { .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled) {
color: #fff; color: #fff;
background: #6B778C; background: #6b778c;
border-color: #6B778C; border-color: #6b778c;
} }
} }
} }
...@@ -64,89 +63,87 @@ ...@@ -64,89 +63,87 @@
margin-bottom: 0; margin-bottom: 0;
} }
} }
} }
.list { .list {
display: flex; display: flex;
margin-bottom: 1.5em; margin-bottom: 1.5em;
h5 { 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;
}
}
} .warp {
.listLable { display: flex;
flex: 0 0 25%; width: 100%;
margin-right: 8px; .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; color: #909399;
} }
} .proportion {
.listItem { font-size: 24px;
display: flex; font-family: PingFangSC-Medium, PingFang SC;
.label { font-weight: 500;
flex: 0.2; color: #303133;
padding: 0 16px; padding: 12px 0;
background: linear-gradient(270deg, #ffffff 0%, #daf2e7 100%);
} }
.text { .Price {
padding: 0px 0px; font-size: 16px;
flex: 1; font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #303133;
} }
p { .warp_List {
margin-bottom: 0; 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{ .upload_item {
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 {
margin-bottom: 16px; margin-bottom: 16px;
display: flex; display: flex;
align-items: center; align-items: center;
...@@ -176,30 +173,93 @@ ...@@ -176,30 +173,93 @@
} }
} }
} }
} }
.gesture{ .gesture {
color: #00B37A; color: #00b37a;
cursor:pointer; cursor: pointer;
} }
.wrapper{ .wrapper {
:global { :global {
// 处理高级筛选input和search按钮不对齐问题、search按钮背景 // 处理高级筛选input和search按钮不对齐问题、search按钮背景
.ant-input-search { .ant-input-search {
.ant-input-group { .ant-input-group {
.ant-input { .ant-input {
padding: 0px !important; padding: 0px !important;
}
} }
} .ant-input-group-addon {
.ant-input-group-addon { .ant-input-search-button {
.ant-input-search-button { background-color: #f7f8fa;
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 { .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