Skip to content

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

✨feat: 详情展示完善

parent 90cbb452
Hide whitespace changes
Inline Side-by-side
Showing with 364 additions and 74 deletions
config/routes/procurementRoute/confirmOffer.ts
View file @ d9772439
......@@ -17,12 +17,28 @@ export const confirmOfferRoute = [
component: '@/pages/transaction/purchaseAbility/confirmOffer/offerInquire'
},
{
/** 报价查询 查看详情 */
path: '/memberCenter/procurementAbility/confirmOffer/offerInquire/preview',
name: '报价查询',
component: '@/pages/transaction/purchaseAbility/confirmOffer/preview',
hideInMenu: true,
noMargin: true,
},
{
/** 待比价 */
path: '/memberCenter/procurementAbility/confirmOffer/toComparePrices',
name: '待比价',
component: '@/pages/transaction/purchaseAbility/confirmOffer/toComparePrices'
},
{
/** 待比价 查看详情 */
path: '/memberCenter/procurementAbility/confirmOffer/toComparePrices/preview',
name: '待比价',
component: '@/pages/transaction/purchaseAbility/confirmOffer/preview',
hideInMenu: true,
noMargin: true,
},
{
/** 比价 */
path: '/memberCenter/procurementAbility/confirmOffer/contrast',
name: '待比价',
......@@ -37,17 +53,41 @@ export const confirmOfferRoute = [
component: '@/pages/transaction/purchaseAbility/confirmOffer/auditResultsOne'
},
{
/** 待审核授标结果(一级) 查看详情 */
path: '/memberCenter/procurementAbility/confirmOffer/auditResultsOne/preview',
name: '待审核授标结果(一级)',
component: '@/pages/transaction/purchaseAbility/confirmOffer/preview',
hideInMenu: true,
noMargin: true,
},
{
/** 待审核授标结果(二级) */
path: '/memberCenter/procurementAbility/confirmOffer/auditResultsTwo',
name: '待审核授标结果(一级)',
component: '@/pages/transaction/purchaseAbility/confirmOffer/auditResultsTwo'
},
{
/** 待审核授标结果(二级) 查看详情 */
path: '/memberCenter/procurementAbility/confirmOffer/auditResultsTwo/preview',
name: '待审核授标结果(二级)',
component: '@/pages/transaction/purchaseAbility/confirmOffer/preview',
hideInMenu: true,
noMargin: true,
},
{
/** 待确认授标结果 */
path: '/memberCenter/procurementAbility/confirmOffer/confirmResults',
name: '待确认授标结果',
component: '@/pages/transaction/purchaseAbility/confirmOffer/confirmResults'
}
},
{
/** 待确认授标结果 查看详情 */
path: '/memberCenter/procurementAbility/confirmOffer/confirmResults/preview',
name: '待确认授标结果',
component: '@/pages/transaction/purchaseAbility/confirmOffer/preview',
hideInMenu: true,
noMargin: true,
},
]
}
]
src/pages/transaction/purchaseAbility/components/detail/components/bidTable/index.tsx
View file @ d9772439
import React, { useContext } from 'react';
import { Row, Col, Checkbox, InputNumber, Divider, Form } from 'antd';
import { Row, Col, Checkbox, InputNumber, Divider, Form, Typography } from 'antd';
import style from './index.less';
import { useBidTable } from '../../../effects/useBidTable';
import { BidDetailContext } from '../context'
import level1 from '@/assets/icons/the_first.png';
import level2 from '@/assets/icons/the_second.png';
import level3 from '@/assets/icons/the_third.png';
import { CheckCircleOutlined } from '@ant-design/icons';
export interface ReduxProps {
redux?(e: any),
preview?: boolean,
}
const BidTable: React.FC<ReduxProps> = (props: any) => {
const { redux } = props;
const { redux, preview } = props;
const [form] = Form.useForm();
const {
formContext: {
......@@ -33,11 +35,11 @@ const BidTable: React.FC<ReduxProps> = (props: any) => {
const params = [...bidDetailContext];
const company = [...params[index].company];
company[idx].awardTaxProbability = v;
company[idx].iSprize = checked ? 1 : 0
company[idx].isPrize = checked ? 1 : 0
let sumPrice = 0;
let awardCount = 0;
let taxPrice = (company[idx].taxPrice * v / 100);
let sprize = company[idx].iSprize;
let sprize = company[idx].isPrize;
company[idx].vPrice = taxPrice;
company[idx].sprize = sprize;
/** 待优化 */
......@@ -186,27 +188,37 @@ const BidTable: React.FC<ReduxProps> = (props: any) => {
<Col span={8}><p className={style['card-list_title']}>授标:</p></Col>
<Col>
<div style={{ display: 'flex' }}>
<Form.Item noStyle>
<Checkbox
defaultChecked={false}
style={{ marginRight: 16 }}
onChange={(e) => chanegChecked(e, index, idx)}
/>
</Form.Item>
<Form.Item
name={`awardTaxProbability_${index}_${idx}`}
style={{ marginBottom: 0, display: 'none' }}
rules={[{
required: true,
message: `awardTaxProbability_${index}_${idx}必须填写`,
}]}
>
<InputNumber
min={0}
max={100}
onChange={(v) => onChangeInput(v, index, idx)}
/>
</Form.Item>
{!preview && (
<>
<Form.Item noStyle>
<Checkbox
defaultChecked={false}
style={{ marginRight: 16 }}
onChange={(e) => chanegChecked(e, index, idx)}
/>
</Form.Item>
<Form.Item
name={`awardTaxProbability_${index}_${idx}`}
style={{ marginBottom: 0, display: 'none' }}
rules={[{
required: true,
message: `awardTaxProbability_${index}_${idx}必须填写`,
}]}
>
<InputNumber
min={0}
max={100}
onChange={(v) => onChangeInput(v, index, idx)}
/>
</Form.Item>
</>
)}
{preview && (
<div style={{ display: 'flex', alignItems: 'center' }}>
<Typography.Text>{ it.isPrize ? `${it.awardTaxProbability}%` : '-'}</Typography.Text>
{ it.isPrize && <CheckCircleOutlined style={{ color: '#00B37A', fontSize: '12px', marginLeft: '4px' }} /> }
</div>
)}
</div>
</Col>
</Row>
......
src/pages/transaction/purchaseAbility/components/detail/components/contrastLyout/index.tsx
View file @ d9772439
......@@ -15,6 +15,7 @@ import { useBidTable } from '../../../effects/useBidTable';
export interface ContrastProps {
effect?: any,
redux?(e: any),
preview?: boolean
}
const ContrastLyout: React.FC<ContrastProps> = (props: any) => {
......@@ -24,6 +25,7 @@ const ContrastLyout: React.FC<ContrastProps> = (props: any) => {
turn
},
redux,
preview
} = props;
const {
formContext: {
......@@ -130,6 +132,7 @@ const ContrastLyout: React.FC<ContrastProps> = (props: any) => {
taxUnitPrice: sort[index].taxUnitPrice,
isTax: sort[index].isTax,
unit: sort[index].unit,
isPrize: sort[index].isPrize,
awardCount: it.awardCount,
id: it.id,
memberId: it.memberId,
......@@ -183,12 +186,19 @@ const ContrastLyout: React.FC<ContrastProps> = (props: any) => {
redux(data)
}
useEffect(() => {
if (preview && Object.keys(context).length > 0) {
atonceContrast()
}
}, [context])
return (
<BidDetailContext.Provider value={dataSource}>
<Card
id='contrastLyout'
title='报价信息'
extra={
preview ? null :
<Space>
<Button onClick={() => history.goBack()}>发起下轮报价</Button>
{context.priceContrast === PRICECONTRAST_TYPE.UNDECRYPTED &&
......@@ -230,7 +240,7 @@ const ContrastLyout: React.FC<ContrastProps> = (props: any) => {
<Divider type='vertical' className={style.vertical} />
比价信息
</div>
<BidTable redux={reduxFetch} />
<BidTable preview={preview} redux={reduxFetch} />
</>
)}
</Tabs.TabPane>
......
src/pages/transaction/purchaseAbility/confirmOffer/auditResultsOne/index.tsx
View file @ d9772439
import React, { useRef, useState } from 'react';
import Table from '../../components/table'
import { history } from 'umi';
import { ColumnType } from 'antd/lib/table/interface';
import EyePreview from '@/components/EyePreview';
import moment from 'moment';
......@@ -93,7 +94,7 @@ const AuditResultsOne = () => {
render: (text: any, record: any) =>
<>
<Button type='link'>审核</Button>
<Button type='link'>查看</Button>
<Button type='link' onClick={() => history.push(`/memberCenter/procurementAbility/confirmOffer/auditResultsOne/preview?id=${record.id}&turn=${record.turn}`)}>查看</Button>
</>
}];
......
src/pages/transaction/purchaseAbility/confirmOffer/auditResultsTwo/index.tsx
View file @ d9772439
import React, { useRef, useState } from 'react';
import Table from '../../components/table'
import { history } from 'umi';
import { ColumnType } from 'antd/lib/table/interface';
import EyePreview from '@/components/EyePreview';
import moment from 'moment';
......@@ -93,7 +94,7 @@ const AuditResultsTwo = () => {
render: (text: any, record: any) =>
<>
<Button type='link'>审核</Button>
<Button type='link'>查看</Button>
<Button type='link' onClick={() => history.push(`/memberCenter/procurementAbility/confirmOffer/auditResultsOne/preview??id=${record.id}&turn=${record.turn}`)}>查看</Button>
</>
}];
......
src/pages/transaction/purchaseAbility/confirmOffer/confirmResults/index.tsx
View file @ d9772439
......@@ -94,7 +94,7 @@ const ConfirmResults = () => {
render: (text: any, record: any) =>
<>
<Button type='link'>确认授标结果</Button>
<Button type='link'>查看</Button>
<Button type='link' onClick={() => history.push(`/memberCenter/procurementAbility/confirmOffer/confirmResults/preview?id=${record.id}&turn=${record.turn}`)}>查看</Button>
</>
}];
......
src/pages/transaction/purchaseAbility/confirmOffer/offerInquire/index.tsx
View file @ d9772439
......@@ -111,7 +111,7 @@ const OfferInquire = () => {
调整截止时间
</Button>
)}
<Button type='link'>查看</Button>
<Button type='link' onClick={() => history.push(`/memberCenter/procurementAbility/confirmOffer/offerInquire/preview?id=${record.id}&turn=${record.turn}`)}>查看</Button>
</>
)
}];
......
src/pages/transaction/purchaseAbility/confirmOffer/preview/index.tsx 0 → 100644
View file @ d9772439
import React, { useState, useEffect, Fragment } from 'react';
import { PublicApi } from '@/services/api';
import { Tag, Badge, Tooltip } from 'antd';
import { Context } from '../../components/detail/components/context';
import { history } from 'umi';
import PeripheralLayout from '../../components/detail';
import ProgressLayout from '../../components/detail/components/progressLayout';
import BasicLayout from '../../components/detail/components/basicLayout';
import ConditionLayout from '../../components/detail/components/conditionLayout';
import ContrastLyout from '../../components/detail/components/contrastLyout';
import RecordLyout from '../../components/detail/components/recordLyout';
import {
OFFTER_EXTERNALSTATE,
OFFTER_EXTERNALSTATE_COLOR,
OFFTER_INTERNALSTATE,
OFFTER_INTERNALSTATE_COLOR,
} from '../../constants';
import { QuestionCircleOutlined } from '@ant-design/icons';
import moment from 'moment';
const ICONSTYLE: any = {
color: '#C0C4CC',
fontSize: '14px',
marginLeft: '5px'
}
const TABLINK = [
{ id: 'progressLayout', title: '流转进度' },
{ id: 'basicLayout', title: '基本信息' },
{ id: 'conditionLayout', title: '交易条件' },
{ id: 'contrastLyout', title: '报价信息' },
{ id: 'recordLyout', title: '流转记录' },
]
const ContrastPreview = () => {
const format = (text) => {
return <>{moment(text).format("YYYY-MM-DD HH:mm:ss")}</>
}
const { query: { id, turn } } = history.location;
const [dataSource, setDataSource] = useState<any>({});
const [basicEffect, setBasicEffect] = useState<any>([]);
const [conditionEffect, setConditionEffect] = useState<any>([]);
const handleBasicEffect = (data: any) => {
setBasicEffect([
{
col: [
{ label: '需求单号', extra: data.purchaseInquiryNo },
{ label: '需求摘要', extra: data.details },
{ label: '外部状态', extra: <Tag color={OFFTER_EXTERNALSTATE_COLOR[data.externalState]}>{OFFTER_EXTERNALSTATE[data.externalState]}</Tag> },
{ label: '内部状态', extra: <Badge status={OFFTER_INTERNALSTATE_COLOR[data.interiorState]} text={OFFTER_INTERNALSTATE[data.interiorState]} /> },
]
},
{
col: [
{
label: '采购类型',
extra: (
<Tooltip placement="top" title='有固定采购金额：采购金额固定，合同期内不可超过采购金额，无固定采购金额：采购金额不固定，可在合同期内按需采购'>
{data.purchaseType === 1 ? '有固定采购金额' : '无固定采购金额'}<QuestionCircleOutlined style={ICONSTYLE} />
</Tooltip>
)
},
{
label: '比价方式',
extra: (
<Tooltip placement="top" title='密封比价：只能看到供应商是否有报价，不能看到供应商的报价明细，只能解封后才能看到报价明细，非密封比价：可以在供应商报完价后立即看到报价明细，无须解封'>
{data.priceContrast === 1 ? '密封比价' : '非密封比价'}<QuestionCircleOutlined style={ICONSTYLE} />
</Tooltip>
)
},
{ label: '会员名称', extra: data.memberName },
]
},
{
col: [
{ label: '单据时间', extra: format(data.createTime) },
{ label: '适用地市', extra: '-' },
]
},
])
}
const handleConditionEffect = (data: any) => {
setConditionEffect([
{
col: [
{ label: '交付日期', extra: format(data.deliveryTime) },
{ label: '交付地址', extra: data.address },
{ label: '报价截止时间', extra: format(data.offerEndTime) },
]
},
{
col: [
{ label: '报价要求', extra: data.offer },
{ label: '付款方式', extra: data.paymentType },
{ label: '税费要求', extra: data.taxes },
]
},
{
col: [
{ label: '物流要求', extra: data.logistics },
{ label: '包装要求', extra: data.packRequire },
{ label: '其他要求', extra: data.otherRequire },
]
},
])
}
const handleGetDataSource = async (trunId: string) => {
const parmas = {
id,
turn: trunId,
}
await PublicApi.getPurchaseConfirmQuotedPriceDetails({ ...parmas }).then(res => {
if (res.code === 1000) {
const { data } = res;
setDataSource(data)
handleBasicEffect(data);
handleConditionEffect(data);
}
})
}
useEffect(() => {
handleGetDataSource(turn)
}, [])
return (
<Context.Provider value={dataSource}>
<PeripheralLayout
no={dataSource.purchaseInquiryNo}
tabLink={TABLINK}
components={
<Fragment>
<ProgressLayout />
<BasicLayout effect={basicEffect} />
<ConditionLayout effect={conditionEffect} />
<ContrastLyout preview={true} effect={{ id, turn }} />
<RecordLyout />
</Fragment>
}
/>
</Context.Provider>
)
}
export default ContrastPreview
src/pages/transaction/purchaseAbility/confirmOffer/toComparePrices/index.tsx
View file @ d9772439
......@@ -97,7 +97,7 @@ const ToComparePrices = () => {
{ record.confirmInteriorState === OFFTER_CONFIRMINTERNALSTATE_TYPE.WAITSTHAN_TYPE &&
<Button
type='link'
onClick={() => history.push(`/memberCenter/procurementAbility/confirmOffer/detail?id=${record.id}&turn=${record.turn}`)}
onClick={() => history.push(`/memberCenter/procurementAbility/confirmOffer/contrast?id=${record.id}&turn=${record.turn}`)}
>
比价
</Button>
......@@ -107,7 +107,7 @@ const ToComparePrices = () => {
record.confirmInteriorState === OFFTER_CONFIRMINTERNALSTATE_TYPE.AUDITNOPASS2_TYPE
) && <Button type='link'>修改授标结果</Button>
}
<Button type='link'>查看</Button>
<Button type='link' onClick={() => history.push(`/memberCenter/procurementAbility/confirmOffer/preview?id=${record.id}&turn=${record.turn}`)}>查看</Button>
</>
}];
......
src/pages/transaction/purchaseAbility/purchaseInquiry/addInquiry/modal/import.tsx
View file @ d9772439
import React from 'react';
import React, { useState } from 'react';
import {
Modal,
Row,
Col,
Image,
Badge,
Progress,
Button
} from 'antd';
import style from './index.less';
import excelIcon from '@/assets/imgs/excel.png'
import excelIcon from '@/assets/imgs/excel.png';
import cx from 'classnames'
interface Iprops {
flag: boolean,
......@@ -17,6 +18,7 @@ interface Iprops {
const Import: React.FC<Iprops> = (props: any) => {
const { flag, onClose } = props;
const [next, setNext] = useState<number>(2);
return (
<Modal
width={400}
......@@ -24,50 +26,121 @@ const Import: React.FC<Iprops> = (props: any) => {
visible={flag}
onCancel={onClose}
footer={
<Button type='primary'>导入</Button>
next !== 1 ? null : <Button type='primary'>导入</Button>
}
>
<Row
style={{
flexDirection: 'column',
}}
>
<Col
{ next === 1 &&
<Row
style={{
display: 'flex',
justifyContent: 'center',
}}
flexDirection: 'column',
}}
>
<Image
width={72}
height={72}
preview={false}
src={excelIcon}
/>
</Col>
<Col
span={24}
className={style.colStyle}
>
<span className={style.badgeStyle}>1</span>
<span className={style.textStyle}>点击下载 EXCEL文件模板</span>
<Button style={{ fontSize: '14px' }} type='link'>下载</Button>
</Col>
<Col
span={24}
className={style.colStyle}
<Col
style={{
display: 'flex',
justifyContent: 'center',
}}
>
<Image
width={72}
height={72}
preview={false}
src={excelIcon}
/>
</Col>
<Col
span={24}
className={style.colStyle}
>
<span className={style.badgeStyle}>1</span>
<span className={style.textStyle}>点击下载 EXCEL文件模板</span>
<Button style={{ fontSize: '14px' }} type='link'>下载</Button>
</Col>
<Col
span={24}
className={style.colStyle}
>
<span className={style.badgeStyle}>2</span>
<span className={style.textStyle}>按照模板整理货品资料</span>
</Col>
<Col
span={24}
className={style.colStyle}
>
<span className={style.badgeStyle}>3</span>
<span className={style.textStyle}>点击导入按钮，导入整理好的货品资料</span>
</Col>
</Row>
}
{ next === 2 &&
<Row
style={{
alignItems: 'center',
flexDirection: 'column',
}}
>
<span className={style.badgeStyle}>2</span>
<span className={style.textStyle}>按照模板整理货品资料</span>
</Col>
<Col
span={24}
className={style.colStyle}
<Col
style={{
display: 'flex',
justifyContent: 'center',
}}
>
<Progress type="circle" percent={30} width={64} />
</Col>
<Col
span={24}
style={{ marginTop: '44px' }}
>
<span className={cx(style.textStyle, style.fontColor)}>正在进行数据导入检查</span>
</Col>
<Col
span={24}
>
<span className={style.textStyle}>请稍后…</span>
</Col>
<Col
span={24}
className={style.marginTop}
>
<Button type='primary'>下一步</Button>
</Col>
</Row>
}
{ next === 3 &&
<Row
style={{
alignItems: 'center',
flexDirection: 'column',
}}
>
<span className={style.badgeStyle}>3</span>
<span className={style.textStyle}>点击导入按钮，导入整理好的货品资料</span>
</Col>
</Row>
<Col
style={{
display: 'flex',
justifyContent: 'center',
}}
>
<Progress type="circle" percent={30} width={64} />
</Col>
<Col
span={24}
style={{ marginTop: '44px' }}
>
<span className={cx(style.textStyle, style.fontColor)}>正在进行数据导入</span>
</Col>
<Col
span={24}
>
<span className={style.textStyle}>请稍后…</span>
</Col>
<Col
span={24}
className={style.marginTop}
>
<Button type='primary'>继续导入</Button>
<Button>导入完成</Button>
</Col>
</Row>
}
</Modal>
)
}
......
src/pages/transaction/purchaseAbility/purchaseInquiry/addInquiry/modal/index.less
View file @ d9772439
......@@ -79,3 +79,9 @@
.colStyle {
padding-left: 40px;
}
.fontColor {
color: #303133;
}
.marginTop {
margin-top: 48px;
}
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