Commit 6b38b124 authored by 前端-钟卫鹏's avatar 前端-钟卫鹏

feat: 新增招标查询列表/详情页面

parent 5455592a
import React, { useState, useCallback, useRef, useContext, useEffect, createRef } from 'react';
import { history } from 'umi'
import { Button } from 'antd';
import style from './index.less'
import OrderDetailWrapper from '@/pages/transaction/components/OrderDetailWrapper';
import PreLoading from '@/components/PreLoading';
// import { useOrderDetail } from '../../../_public/order/effects/useOrderDetail';
// import OrderDetailSection from '../../../components/orderDetailSection';
import OrderPayModal from '@/pages/transaction/components/orderPayModal';
import { BidDetailContext } from '@/pages/procurement/_public/bid/context';
import { useBidDetail } from '@/pages/procurement/_public/bid/effects/useBidDetail';
import BidDetailHeader from '@/pages/procurement/components/bidDetailHeader';
import OrderDetailSection from '@/pages/transaction/components/orderDetailSection';
import style from './index.less'
import BidDetailSection from '@/pages/procurement/components/bidDetailSection';
const CallForBidsSearchDetail: React.FC = () => {
......
......@@ -9,7 +9,7 @@ import { PlayCircleOutlined, PoweroffOutlined } from '@ant-design/icons'
import CustomTag from '@/pages/procurement/components/CustomTag'
import CustomBadge from '@/pages/procurement/components/customBadge'
// 业务hooks, 待支付订单
// 招标查询
export const useSelfTable = () => {
const ref = useRef<any>({})
......@@ -21,7 +21,7 @@ export const useSelfTable = () => {
})
}
const payOrderColumns: any[] = [
const callForBidColumns: any[] = [
{
title: '序号',
align: 'center',
......@@ -130,6 +130,6 @@ export const useSelfTable = () => {
return {
ref,
columns: payOrderColumns
columns: callForBidColumns
}
}
import React, { useContext, useState } from 'react'
import { Row, Col, Tag, Modal } from 'antd'
import MellowCard from '@/components/MellowCard'
import { BidDetailContext } from '@/pages/procurement/_public/bid/context';
import { formatTimeString } from '@/utils'
import style from './index.less'
import { CaretDownOutlined, CaretUpOutlined } from '@ant-design/icons';
export interface BasicInfoProps {
cardTitle?: string;
}
const BasicInfo: React.FC<BasicInfoProps> = ({cardTitle}) => {
const bidDetailContext = useContext(BidDetailContext)
const { data, ctl } = bidDetailContext
const [showMore, setShowMore] = useState<boolean>(false)
console.log(data, 'basicInfo')
const toogleMore = () => {
setShowMore(!showMore)
}
const columnList = [
{
span: 8,
fieldList: [
{ title: '招标编号', name: 'orderNo' },
{ title: '外部状态', name: 'orderModel' },
{ title: '内部状态', name: 'orderModel' },
{ title: '发布时间', name: 'createTime', render: (text) => formatTimeString(text) },
]
},
{
span: 8,
fieldList: [
{ title: '招标项目', name: 'createMemberName' },
{ title: '项目预算', name: 'createMemberName' },
{ title: '采购类型', name: 'createMemberName' },
{ title: '招标会员', name: 'createMemberName' },
{ title: '招标摘要', name: 'createMemberName' },
]
},
{
span: 8,
fieldList: [
{
title: '适用地址',
name: 'paymentInformationResponses',
render: (t, r) => {
const showDataSource = showMore ? data['paymentInformationResponses'] : [...data['paymentInformationResponses']].splice(0, 3)
return <>
<p>
{
showDataSource.map((_item, _i) => <p key={_i}>{_item.payNode+'/'+(_item.payNode||'')}</p>)
}
</p>
{
data.length > 3 &&
<p onClick={toogleMore} style={{ cursor: 'pointer' }} className="commonPickColor">
展开{showMore ? <CaretDownOutlined /> : <CaretUpOutlined />}
</p>
}
</>
}
},
]
}
]
const RenderBasicInfoColumns = ({ infoList = [], dataSource }) => <Row>
{
infoList.map(({span, fieldList = []}, index) => (<Col key={index} span={span}>
{
// item.fieldList.map((_v, _i) => dataSource[_v.name] ? <Row key={_v.name} className={style['card-list']}>
// <Col span={6} className={style['card-list_title']}>{_v.title}</Col>
// {/* <Col flex={1} {..._v.resetCol}>{_v.render ? _v.render(dataSource[_v.name], dataSource) : dataSource[_v.name]}</Col> */}
// </Row> : null)
fieldList.length ? fieldList.map((_v, _i) => <Row key={_v.name} className={style['card-list']}>
<Col span={6} className={style['card-list_title']}>{_v.title}</Col>
<Col>{_v.render ? _v.render(dataSource[_v.name], dataSource) : dataSource[_v.name]}</Col>
</Row>) : null
}
</Col>))
}
</Row>
return (
<MellowCard
title={cardTitle}
style={{marginTop: 24}}
bordered={false}
fullHeight
>
<RenderBasicInfoColumns infoList={columnList} dataSource={data} />
</MellowCard>)
}
BasicInfo.defaultProps = {}
export default BasicInfo
......@@ -40,7 +40,7 @@ const BidDetailHeader:React.FC<BidDetailHeaderProps> = ({ extraRight, detailList
setCurrent(index)
}
})
console.log('123456')
// 锚点导航距离顶端距离
let navDom: any = document.getElementById("anchorTitle")
let distance = navDom.offsetTop - document.documentElement.scrollTop
......@@ -61,6 +61,7 @@ const BidDetailHeader:React.FC<BidDetailHeaderProps> = ({ extraRight, detailList
const clickItem = (index: any) => {
setCurrent(index)
console.log(index, 'index')
}
return (
......
.anchorContentWrap {
div {
&:target {
padding-top: 160px;
margin-top: -160px;
padding-top: 200px;
margin-top: -200px;
}
}
}
import React from 'react'
import { Card, Radio } from 'antd'
import AuditProcess from '@/components/AuditProcess'
import { findLastIndexFlowState } from '@/utils'
// import OrderProductTable from '../../components/orderProductTable'
// import SaleOrderProductTable from '../../components/saleOrderProductTable'
// import OrderPayTabs from '../../components/orderPayTabs'
// import OrderMergeInfo from '../../components/orderMergeInfo'
// import OrderDeleveRecord from '../../components/orderDeleveRecord'
// import OrderTransformRecord from '../../components/orderTransformRecord'
// import OrderSaleRecord from '../orderSaleRecord'
import style from './index.less'
import MellowCard from '@/components/MellowCard'
import TransferProcess from '../transferProcess'
import BasicInfo from '../basicInfo'
import DescriptionsInfo from '../descriptionsInfo'
import BidMaterial from '../bidMaterial'
import BidMethod from '../bidMethod'
import BidTransformRecord from '../transferRecord'
export interface BidDetailSectionProps {
formContext: any,
......@@ -23,54 +15,6 @@ export interface BidDetailSectionProps {
const BidDetailSection:React.FC<BidDetailSectionProps> = ({formContext, type = 'purchaseOrder', anchorList = []}) => {
return (
// formContext.data && <div className='gray-wrap'>
// <AuditProcess
// customTitleKey='operationalProcess'
// customKey='state'
// outerVerifyCurrent={findLastIndexFlowState(formContext.data.externalWorkflowFlowRecordLogResponses)}
// innerVerifyCurrent={findLastIndexFlowState(formContext.data.interiorWorkflowFlowRecordLogResponses)}
// outerVerifySteps={
// formContext.data.externalWorkflowFlowRecordLogResponses ?
// formContext.data.externalWorkflowFlowRecordLogResponses.map(item => ({
// ...item,
// status: item.isExecute ? 'finish' : 'wait',
// })) :
// []
// }
// innerVerifySteps={
// formContext.data.interiorWorkflowFlowRecordLogResponses ?
// formContext.data.interiorWorkflowFlowRecordLogResponses.map(item => ({
// ...item,
// status: item.isExecute ? 'finish' : 'wait',
// })) :
// []
// }
// ></AuditProcess>
// { type === 'saleOrder' ? <SaleOrderProductTable/> : <OrderProductTable editable /> }
// <OrderPayTabs />
// <OrderMergeInfo />
// { type === 'saleOrder' ? <OrderSaleRecord /> : <OrderDeleveRecord /> }
// <OrderTransformRecord type={type}/>
// </div>
// const anchorTitleMapId = [
// { title: '流转进度', id: 'transferProcess' },
// { title: '基本信息', id: 'baseicInfo' },
// { title: '招标物料', id: 'bidMaterial' },
// { title: '招标要求', id: 'bidNeed' },
// { title: '报名要求', id: 'registerNeed' },
// { title: '资格预审要求', id: 'checkNeed' },
// { title: '评标要求', id: 'remarkNeed' },
// { title: '其他要求', id: 'otherNeed' },
// { title: '招标方式', id: 'bidWay' },
// { title: '流转记录', id: 'transferRecord' },
// ]
formContext.data &&
<div className={[style.anchorContentWrap, "anchorContent"].join(' ')}>
<div id={anchorList[0]['id']}>
......@@ -99,55 +43,31 @@ const BidDetailSection:React.FC<BidDetailSectionProps> = ({formContext, type = '
></TransferProcess>
</div>
<div id={anchorList[1]['id']}>
<BasicInfo cardTitle={anchorList[1]['title']}/>
<DescriptionsInfo cardTitle={anchorList[1]['title']} type="basicInfo" />
</div>
<div id={anchorList[2]['id']}>
<MellowCard title={anchorList[2]['title']} style={{marginTop: 24}} bordered={false}>
<p>1234564654</p>
<br/>
<p>1234564654</p>
<br/>
<p>1234564654</p>
<br/>
<p>1234564654</p>
<br/>
<p>1234564654</p>
<br/>
<p>1234564654</p>
<p>1234564654</p>
<br/>
<p>1234564654</p>
<br/>
<p>1234564654</p>
<br/>
<p>1234564654</p>
<br/>
<p>1234564654</p>
</MellowCard>
<BidMaterial cardTitle={anchorList[2]['title']} />
</div>
<div id={anchorList[3]['id']}>
<MellowCard title={anchorList[3]['title']} style={{marginTop: 24}} bordered={false}>
<p>1234564654</p>
<br/>
<p>1234564654</p>
<br/>
<p>1234564654</p>
<br/>
<p>1234564654</p>
<br/>
<p>1234564654</p>
<br/>
<p>1234564654</p>
<p>1234564654</p>
<br/>
<p>1234564654</p>
<br/>
<p>1234564654</p>
<br/>
<p>1234564654</p>
<br/>
<p>1234564654</p>
</MellowCard>
<DescriptionsInfo cardTitle={anchorList[3]['title']} type="bidNeed" />
</div>
<div id={anchorList[4]['id']}>
<DescriptionsInfo cardTitle={anchorList[4]['title']} type="registerNeed" />
</div>
<div id={anchorList[5]['id']}>
<DescriptionsInfo cardTitle={anchorList[5]['title']} type="checkNeed" />
</div>
<div id={anchorList[6]['id']}>
<DescriptionsInfo cardTitle={anchorList[6]['title']} type="remarkNeed" />
</div>
<div id={anchorList[7]['id']}>
<DescriptionsInfo cardTitle={anchorList[7]['title']} type="otherNeed" />
</div>
<div id={anchorList[8]['id']}>
<BidMethod cardTitle={anchorList[8]['title']} />
</div>
<div id={anchorList[9]['id']}>
<BidTransformRecord cardTitle={anchorList[9]['title']} />
</div>
</div>
......
import React, { useContext, useState } from 'react'
import { Table } from 'antd'
import MellowCard from '@/components/MellowCard'
import { BidDetailContext } from '@/pages/procurement/_public/bid/context';
/**
* 招标物料表格
*/
export interface BidMaterialProps {
cardTitle?: string;
}
const BidMaterial: React.FC<BidMaterialProps> = ({cardTitle}) => {
const bidDetailContext = useContext(BidDetailContext)
const { data, ctl } = bidDetailContext
const dataSource = [
{
key: '1',
name: '胡彦斌',
age: 32,
address: '西湖区湖底公园1号',
},
{
key: '2',
name: '胡彦祖',
age: 42,
address: '西湖区湖底公园1号',
},
{
key: '3',
name: '胡彦斌',
age: 32,
address: '西湖区湖底公园1号',
},
{
key: '4',
name: '胡彦祖',
age: 42,
address: '西湖区湖底公园1号',
},
];
const columns = [
{
title: '姓名',
dataIndex: 'name',
key: 'name',
},
{
title: '年龄',
dataIndex: 'age',
key: 'age',
},
{
title: '住址',
dataIndex: 'address',
key: 'address',
},
];
return (
<MellowCard
title={cardTitle}
style={{marginTop: 24}}
bordered={false}
fullHeight
>
<Table dataSource={dataSource} columns={columns} pagination={{size: "small"}} />
</MellowCard>)
}
BidMaterial.defaultProps = {}
export default BidMaterial
import React, { useContext, useState } from 'react'
import { Table, Button, Switch, Tooltip } from 'antd'
import MellowCard from '@/components/MellowCard'
import { BidDetailContext } from '@/pages/procurement/_public/bid/context';
import { QuestionCircleOutlined } from '@ant-design/icons';
/**
* 招标方式
*/
export interface BidMethodProps {
cardTitle?: string;
}
const BidMethod: React.FC<BidMethodProps> = ({cardTitle}) => {
const bidDetailContext = useContext(BidDetailContext)
const { data, ctl } = bidDetailContext
const dataSource = [
{
key: '1',
name: '胡彦斌',
age: 32,
address: '西湖区湖底公园1号',
},
{
key: '2',
name: '胡彦祖',
age: 42,
address: '西湖区湖底公园1号',
},
{
key: '3',
name: '胡彦斌',
age: 32,
address: '西湖区湖底公园1号',
},
{
key: '4',
name: '胡彦祖',
age: 42,
address: '西湖区湖底公园1号',
},
];
const columns = [
{
title: '姓名',
dataIndex: 'name',
key: 'name',
},
{
title: '年龄',
dataIndex: 'age',
key: 'age',
},
{
title: '住址',
dataIndex: 'address',
key: 'address',
},
{
title: '是否归属会员',
dataIndex: 'address',
key: 'address',
},
{
title: <>状态<Tooltip title="打开开关,审核通过后,将招标发至对应的会员"><span>&nbsp;<QuestionCircleOutlined /></span></Tooltip></>,
dataIndex: 'address',
key: 'address',
render: (text, record) => <Switch defaultChecked onChange={() => onChange(record)} />
},
{
title: '操作',
dataIndex: 'ctl',
key: 'ctl',
render: (text, record) => <Button type='link'>进入店铺</Button>
}
];
const onChange = (record) => {
console.log(record)
}
return (
<MellowCard
title={cardTitle}
style={{marginTop: 24}}
bordered={false}
fullHeight
>
<Table dataSource={dataSource} columns={columns} pagination={{size: "small"}} />
</MellowCard>)
}
BidMethod.defaultProps = {}
export default BidMethod
......@@ -45,7 +45,7 @@ const CustomBadge: React.FC<StatusColorsProps> = (props) => {
const { status, type } = props
const statusText = typeMaps[type]
// const statusShowColor = matchStatusColor(status)
return (<><span className={classNameMap[status]}></span>{statusText[status]}</>)
return (status ? <><span className={classNameMap[status]}></span>{statusText[status]}</> : null)
}
CustomBadge.defaultProps = {}
......
......@@ -5,7 +5,8 @@ import { insideStatusText, outStatusText } from '../constants'
// 用于标签状态控制
export interface StatusColorsProps {
status: number,
type: 'out' | 'inside'
/** 外部状态 内部状态 外部流转状态 内部流转状态 */
type: 'out' | 'inside' | 'transformInside' | 'transformOut'
}
// 颜色映射
......@@ -23,11 +24,34 @@ const mapColor = [
"rgb(101, 84, 192)", // 紫
"rgb(230, 63, 59)", // 红
"rgb(0, 179, 122)", // 绿
"rgb(96, 98, 102)", // 灰
"rgb(255, 153, 31)", // 黄
"rgb(63, 126, 210)", // 蓝
"rgb(101, 84, 192)", // 紫
"rgb(230, 63, 59)", // 红
"rgb(0, 179, 122)", // 绿
"rgb(96, 98, 102)", // 灰
"rgb(255, 153, 31)", // 黄
"rgb(63, 126, 210)", // 蓝
"rgb(101, 84, 192)", // 紫
"rgb(230, 63, 59)", // 红
"rgb(0, 179, 122)", // 绿
"rgb(96, 98, 102)", // 灰
"rgb(255, 153, 31)", // 黄
"rgb(63, 126, 210)", // 蓝
"rgb(101, 84, 192)", // 紫
"rgb(230, 63, 59)", // 红
"rgb(0, 179, 122)", // 绿
]
const typeMaps = {
'out': outStatusText,
'inside': insideStatusText,
// transformOut:
// transformInside:
}
// 订单内部状态显示
......@@ -36,12 +60,12 @@ const CustomTag: React.FC<StatusColorsProps> = (props) => {
const statusText = typeMaps[type]
// const statusShowColor = matchStatusColor(status)
return (
<span style={{
status ? <span style={{
color: mapColor[status],
padding: '2px 4px',
backgroundColor: `rgba(${mapColor[status].slice(4, mapColor[status].length-1)}, 0.1)`,
borderRadius: '4px',
}}>{statusText[status]}</span>
}}>{statusText[status]}</span> : null
)
}
......
import React, { useContext, useState } from 'react'
import { Row, Col, Tag, Modal } from 'antd'
import MellowCard from '@/components/MellowCard'
import { BidDetailContext } from '@/pages/procurement/_public/bid/context';
import { formatTimeString } from '@/utils'
import style from './index.less'
import { CaretDownOutlined, CaretUpOutlined, FileFilled } from '@ant-design/icons';
/**
* 描述信息列表
*/
export interface BasicInfoProps {
/** title标题 */
cardTitle?: string;
/** 显示信息类型
* 'basicInfo' 基本信息 | 'bidNeed' 招标要求 | 'registerNeed' 报名要求 | 'checkNeed' 资格预审要求 | 'remarkNeed' 评标要求 | 'otherNeed' 其他要求
*/
type?: 'basicInfo' | 'bidNeed' | 'registerNeed' | 'checkNeed' | 'remarkNeed' | 'otherNeed';
}
const DescriptionsInfo: React.FC<BasicInfoProps> = ({cardTitle, type}) => {
const bidDetailContext = useContext(BidDetailContext)
const { data, ctl } = bidDetailContext
const [showMore, setShowMore] = useState<boolean>(false)
const toogleMore = () => {
setShowMore(!showMore)
}
// 基本信息
const basicColumnList = [
{
span: 8,
fieldList: [
{ title: '招标编号', name: 'orderNo' },
{ title: '外部状态', name: 'orderModel' },
{ title: '内部状态', name: 'orderModel' },
{ title: '发布时间', name: 'createTime', render: (text) => formatTimeString(text) },
]
},
{
span: 8,
fieldList: [
{ title: '招标项目', name: 'createMemberName' },
{ title: '项目预算', name: 'createMemberName' },
{ title: '采购类型', name: 'createMemberName' },
{ title: '招标会员', name: 'createMemberName' },
{ title: '招标摘要', name: 'createMemberName' },
]
},
{
span: 8,
fieldList: [
{
title: '适用地址',
name: 'paymentInformationResponses',
render: (t, r) => {
const showDataSource = showMore ? data['paymentInformationResponses'] : [...data['paymentInformationResponses']].splice(0, 3)
return <>
<p>
{
showDataSource.map((_item, _i) => <p key={_i}>{_item.payNode+'/'+(_item.payNode||'')}</p>)
}
</p>
{
data.length > 3 &&
<p onClick={toogleMore} style={{ cursor: 'pointer' }} className="commonPickColor">
展开{showMore ? <CaretDownOutlined /> : <CaretUpOutlined />}
</p>
}
</>
}
},
]
}
]
// 招标要求
const callForNeedList = [
{
span: 8,
fieldList: [
{ title: '投标截止时间', name: 'createTime', render: (text) => formatTimeString(text) },
{ title: '期望交付日期', name: 'createTime', render: (text) => formatTimeString(text) },
]
},
{
span: 8,
fieldList: [
{ title: '目标价', name: 'createMemberName' },
{ title: '招标要求', name: 'createMemberName' },
]
},
{
span: 8,
fieldList: [
{
title: '招标文件',
name: 'paymentInformationResponses',
render: (t, r) => (<div>
{
data['paymentInformationResponses'].map((_item, _i) => <p><a key={_i}><FileFilled /> {_item.payNode}</a></p>)
}
</div>)
},
]
}
]
// 报名要求
const registerNeedList = [
{
span: 8,
fieldList: [
{ title: '报名要求时间', name: 'createTime', render: (text) => formatTimeString(text) },
{ title: '报名要求', name: 'createMemberName' },
]
},
{
span: 8,
fieldList: [
{
title: '报名要求附件',
name: 'paymentInformationResponses',
render: (t, r) => (<div>
{
data['paymentInformationResponses'].map((_item, _i) => <p><a key={_i}><FileFilled /> {_item.payNode}</a></p>)
}
</div>)
},
]
}
]
// 资格预审要求
const checkNeedList = [
{
span: 8,
fieldList: [
{ title: '资格预审时间', name: 'createTime', render: (text) => formatTimeString(text) },
{ title: '资格预审要求', name: 'createMemberName' },
]
},
{
span: 8,
fieldList: [
{
title: '资格预审要求附件',
name: 'paymentInformationResponses',
render: (t, r) => (<div>
{
data['paymentInformationResponses'].map((_item, _i) => <p><a key={_i}><FileFilled /> {_item.payNode}</a></p>)
}
</div>)
},
]
}
]
// 评标要求
const remarkNeedList = [
{
span: 8,
fieldList: [
{ title: '评标要求时间', name: 'createTime', render: (text) => formatTimeString(text) },
{ title: '评标要求', name: 'createMemberName' },
]
},
{
span: 8,
fieldList: [
{
title: '评标要求附件',
name: 'paymentInformationResponses',
render: (t, r) => (<div>
{
data['paymentInformationResponses'].map((_item, _i) => <p><a key={_i}><FileFilled /> {_item.payNode}</a></p>)
}
</div>)
},
]
},
{
span: 8,
fieldList: [
{ title: '是否在线评标', name: 'createMemberName' },
{ title: '评标项模板', name: 'createMemberName' },
]
},
]
// 其他要求
const otherNeedList = [
{
span: 8,
fieldList: [
{ title: '付款方式', name: 'createTime' },
{ title: '交付地址', name: 'createMemberName' },
{ title: '税费要求', name: 'createMemberName' },
]
},
{
span: 8,
fieldList: [
{ title: '交付要求', name: 'createMemberName' },
{ title: '物流要求', name: 'createMemberName' },
]
},
{
span: 8,
fieldList: [
{ title: '包装要求', name: 'createMemberName' },
{ title: '其他要求', name: 'createMemberName' },
]
},
]
/** 类型数据映射 */
const Type_Data_Map = {
'basicInfo': basicColumnList,
'bidNeed': callForNeedList,
'registerNeed': registerNeedList,
'checkNeed': checkNeedList,
'remarkNeed': remarkNeedList,
'otherNeed': otherNeedList,
}
const RenderBasicInfoColumns = ({ infoList = [], dataSource }) => <Row>
{
infoList.map(({span, fieldList = []}, index) => (<Col key={index} span={span}>
{
fieldList.length ? fieldList.map((_v, _i) => <Row key={_v.name} className={style['card-list']}>
<Col span={6} className={style['card-list_title']}>{_v.title}</Col>
<Col>{_v.render ? _v.render(dataSource[_v.name], dataSource) : dataSource[_v.name]}</Col>
</Row>) : null
}
</Col>))
}
</Row>
return (
<MellowCard
title={cardTitle}
style={{marginTop: 24}}
bordered={false}
fullHeight
>
<RenderBasicInfoColumns infoList={Type_Data_Map[type]} dataSource={data} />
{
type === 'remarkNeed' ?
<div className={style['card-list']}>
<p className={style['card-list_title']}>评标专家列表</p>
<p style={{backgroundColor: '#fafbfc'}}>
<Row>
<Col span={1}>1</Col>
<Col span={2}>大佬</Col>
<Col span={4}>kuaimeizheng@qq.com</Col>
<Col span={4}>全球总监</Col>
</Row>
</p>
<p style={{backgroundColor: '#fafbfc'}}>
<Row>
<Col span={1}>1</Col>
<Col span={2}>大佬</Col>
<Col span={4}>kuaimeizheng@qq.com</Col>
<Col span={4}>宇宙总监</Col>
</Row>
</p>
<p style={{backgroundColor: '#fafbfc'}}>
<Row>
<Col span={1}>1</Col>
<Col span={2}>大佬</Col>
<Col span={4}>kuaimeizheng@qq.com</Col>
<Col span={4}>宇宙总监</Col>
</Row>
</p>
</div>
: null
}
</MellowCard>)
}
DescriptionsInfo.defaultProps = {}
export default DescriptionsInfo
.cardWrap {
:global {
.ant-radio-button-wrapper:hover {
color: #606266;
}
.ant-radio-group-solid .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled) {
color: #fff;
background: #6B778C;
border-color: #6B778C;
}
.ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled)::before {
background-color: #6B778C;
}
}
}
import React, { useContext, useState } from 'react'
import { Tabs, Table, Radio } from 'antd'
import { formatTimeString } from '@/utils'
import { BidDetailContext } from '@/pages/procurement/_public/bid/context';
import MellowCard from '@/components/MellowCard'
import CustomTag from '../CustomTag';
import { TransferEnum } from '../transferProcess';
import style from './index.less'
/**
* 招标流转记录
*/
export interface BidTransformRecordProps {
cardTitle?: string;
}
const outReocrdCols: any[] = [
{
title: '流转顺序号',
dataIndex: 'no',
align: 'center',
key: 'no',
render: (_, __, index: number) => index + 1
},
{
title: '操作角色',
dataIndex: 'roleName',
align: 'center',
key: 'roleName',
},
{
title: '状态',
dataIndex: 'state',
align: 'center',
key: 'state',
// render: text => <CustomTag status={text} type='transformOut'/>
},
{
title: '操作',
dataIndex: 'operation',
align: 'center',
key: 'operation',
},
{
title: '操作时间',
dataIndex: 'operationTime',
align: 'center',
key: 'operationTime',
render: time => formatTimeString(time)
},
{
title: '审核意见',
dataIndex: 'auditOpinion',
align: 'center',
key: 'auditOpinion',
},
]
const insideRecordCols: any[] = [
{
title: '流转记录',
dataIndex: 'no',
align: 'center',
key: 'no',
render: (_, __, index: number) => index + 1
},
{
title: '操作人',
dataIndex: 'roleName',
align: 'center',
key: 'roleName',
},
{
title: '部门',
dataIndex: 'department',
align: 'center',
key: 'department',
},
{
title: '职位',
dataIndex: 'position',
align: 'center',
key: 'position',
},
{
title: '状态',
dataIndex: 'state',
align: 'center',
key: 'state',
// render: text => <CustomTag status={text} type='transformInside'/>
},
{
title: '操作',
dataIndex: 'operation',
align: 'center',
key: 'operation',
},
{
title: '操作时间',
dataIndex: 'operationTime',
align: 'center',
key: 'operationTime',
render: text => formatTimeString(text)
},
{
title: '审核意见',
dataIndex: 'auditOpinion',
align: 'center',
key: 'auditOpinion',
},
]
const BidTransformRecord:React.FC<BidTransformRecordProps> = ({cardTitle}) => {
const { data } = useContext(BidDetailContext)
const { externalProcurementOrderLogResponses, interiorProcurementOrderLogResponses } = data
const [transferRadio, setTransferRadio] = useState<TransferEnum>(TransferEnum.Outer)
const handleChangeType = (e) => {
setTransferRadio(e.target.value)
}
return (
<MellowCard
title={cardTitle}
style={{marginTop: 24}}
bordered={false}
extra={
<Radio.Group value={transferRadio} buttonStyle="solid" size="small" onChange={handleChangeType}>
{externalProcurementOrderLogResponses?.length ? <Radio.Button value={TransferEnum.Outer}>外部流转</Radio.Button> : null}
{interiorProcurementOrderLogResponses?.length ? <Radio.Button value={TransferEnum.Interior}>内部流转</Radio.Button> : null}
</Radio.Group>
}
className={style.cardWrap}
>
{
(externalProcurementOrderLogResponses?.length && transferRadio === TransferEnum.Outer) ?
<Table
columns={outReocrdCols}
dataSource={externalProcurementOrderLogResponses}
pagination={false}
rowKey="id"
/> : null
}
{
(interiorProcurementOrderLogResponses?.length && transferRadio === TransferEnum.Interior) ?
<Table
columns={insideRecordCols}
dataSource={interiorProcurementOrderLogResponses}
pagination={false}
rowKey="id"
/> : null
}
</MellowCard>
)
}
BidTransformRecord.defaultProps = {}
export default BidTransformRecord
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