5.16 内拍改造
This commit is contained in:
jl-zhoujl2
@ -71,6 +71,14 @@ export default [
|
||||
},
|
||||
],
|
||||
},
|
||||
{//内拍-参与竞拍列表
|
||||
path: '/AuctionParticipateList',
|
||||
component: './Auction/AuctionParticipateList',
|
||||
},
|
||||
{//内拍-参与竞拍详情
|
||||
path: '/AuctionParticipateDetail',
|
||||
component: './Auction/AuctionParticipateDetail',
|
||||
},
|
||||
|
||||
//==============================================================引入的业务路由
|
||||
...approvalForm,//审批单
|
||||
|
||||
@ -31,7 +31,7 @@
|
||||
text-align: center;
|
||||
line-height: 50px;
|
||||
font-size: 15px;
|
||||
border:1px solid#f0f0f0;
|
||||
border:1px solid #f0f0f0;
|
||||
//border-radius: 3px;
|
||||
margin-left: -1px;
|
||||
&:hover{
|
||||
|
||||
@ -131,23 +131,26 @@ const AuctionLookingForInnerShot: React.FC<{}> = () => {
|
||||
|
||||
//参与竞拍
|
||||
const handleOk = () => {
|
||||
const fromData = {
|
||||
"auctionId": auctionId,
|
||||
"biddersLxdh": form.getFieldValue("biddersLxdh"),
|
||||
"biddersFj": form.getFieldValue("biddersFj"),
|
||||
"biddersBs": 0
|
||||
}
|
||||
insertBidders(fromData).then(res => {
|
||||
if (res != null && res.message == "success") {
|
||||
message.success("参与竞拍成功！");
|
||||
checkRelationRef.current?.reload();
|
||||
setIsModalVisible(false);
|
||||
} else {
|
||||
message.error("参与竞拍失败！");
|
||||
checkRelationRef.current?.reload();
|
||||
setIsModalVisible(false);
|
||||
form.validateFields().then(values => {
|
||||
const fromData = {
|
||||
"auctionId": auctionId,
|
||||
"biddersCpr": form.getFieldValue("biddersCpr"),
|
||||
"biddersLxdh": form.getFieldValue("biddersLxdh"),
|
||||
"biddersFj": form.getFieldValue("biddersFj"),
|
||||
"biddersBs": 0
|
||||
}
|
||||
});
|
||||
insertBidders(fromData).then(res => {
|
||||
if (res != null && res.message == "success") {
|
||||
message.success("参与竞拍成功！");
|
||||
checkRelationRef.current?.reload();
|
||||
setIsModalVisible(false);
|
||||
} else {
|
||||
message.error("参与竞拍失败！");
|
||||
checkRelationRef.current?.reload();
|
||||
setIsModalVisible(false);
|
||||
}
|
||||
});
|
||||
})
|
||||
};
|
||||
|
||||
const handleCancel = () => {
|
||||
@ -222,7 +225,8 @@ const AuctionLookingForInnerShot: React.FC<{}> = () => {
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label="参拍人"
|
||||
name="fullName"
|
||||
name="biddersCpr"
|
||||
rules={[{ required: true, message: '请填写此项' }]}
|
||||
>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
|
||||
@ -0,0 +1,639 @@
|
||||
/*
|
||||
* @Author: liqiang
|
||||
* @Date: 2021-02-23 13:49:53
|
||||
* @LastEditTime: 2021-03-25 16:46:14
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: \ebtp-cloud-frontend\src\pages\Auction\AuctionViewAuctions\components\A.tsx
|
||||
*/
|
||||
import { isEmpty } from '@/utils/CommonUtils';
|
||||
import { Button, Col, Divider, Form, Input, message, Modal, Row, Spin, Tabs } from 'antd';
|
||||
import React, { useEffect, useRef, useState } from 'react';
|
||||
import ProTable from '@ant-design/pro-table';
|
||||
import ExtendUpload from '@/utils/ExtendUpload';
|
||||
import '../../AuctionViewAuctions/auctionParts.less';
|
||||
import { getProId, getSessionRoleData, getSessionUserData } from '@/utils/session';
|
||||
import { pictureDisplayPath } from '@/utils/DownloadUtils';
|
||||
import { algebraicAddition, digitalConversionAmount } from '@/utils/NumberUtils';
|
||||
import { getFilelist } from '@/services/download_';
|
||||
import { getAuctionViewAuctions, getRedisBidData, putOrderBidPrice, updatetOnlookers } from '../../AuctionViewAuctions/service';
|
||||
import AuctionImage from '../../AuctionViewAuctions/components/AuctionImage';
|
||||
import CountDownUtils from '../../AuctionViewAuctions/components/CountDownUtils';
|
||||
import { insertBidders } from '../../AuctionLookingForInnerShot/service';
|
||||
const { TabPane } = Tabs;
|
||||
|
||||
const layout = {
|
||||
labelCol: { span: 7 },
|
||||
wrapperCol: { span: 13 },
|
||||
};
|
||||
|
||||
//定时器间隔时间
|
||||
const timingInterval = 5000;
|
||||
//金额校验正则 保留两位小数
|
||||
const amountMoney = /^\d{1,15}([.]\d{1,2})?$/;
|
||||
const AuctionViewAuctions: React.FC = () => {
|
||||
//项目id
|
||||
const tpId = getProId();
|
||||
//状态 0围观 1 参拍
|
||||
const [viewStatus, setViewStatus] = useState<string>('');
|
||||
//出价数据
|
||||
const [cjDataSource, setCjDataSource] = useState<any[]>([]);
|
||||
//起拍价
|
||||
const [startingPrice, setStartingPrice] = useState<any>();
|
||||
//公告数据
|
||||
const [noticeData, setNoticeData] = useState<any>();
|
||||
//物资数据
|
||||
const [auctionMaterialsList, setAuctionMaterialsList] = useState<any[]>([]);
|
||||
//标的物所在地：右侧信息
|
||||
const [locationOfTheSubjectMatter, setLocationOfTheSubjectMatter] = useState<any>();
|
||||
const [subjectMatterIntroductionForm] = Form.useForm();
|
||||
//标的物清单附件bid
|
||||
const [subjectMatterIntroductionBid, setSubjectMatterIntroductionBid] = useState<string>('');
|
||||
//项目名称
|
||||
const [projectName, setProjectName] = useState<string>('');
|
||||
//参拍信息
|
||||
const [participateData, setParticipateData] = useState<any>();
|
||||
//当前价
|
||||
const [currentPrice, setCurrentPrice] = useState<number>(0);
|
||||
//延时次数
|
||||
const [delay, setDelay] = useState<any>();
|
||||
//是否结束
|
||||
const [overFlag, setOverFlag] = useState<boolean>(false);
|
||||
//倒计时剩余时间
|
||||
const [countDownTime, setCountDownTime] = useState<any>(null);
|
||||
//结束时间
|
||||
const [endTime, setEndTime] = useState<string>('');
|
||||
|
||||
const ref = useRef<any>();
|
||||
|
||||
const overFlagRef = useRef<any>();
|
||||
//图片
|
||||
const [auctionImage, setAuctionImage] = useState<string[]>([]);
|
||||
//显示图片
|
||||
const [auctionImageFlag, setAuctionImageFlag] = useState<boolean>(false);
|
||||
//控制模态框是否显示
|
||||
const [isModalVisible, setIsModalVisible] = useState<boolean>(false);
|
||||
//loading
|
||||
const [loading, setLoading] = useState<boolean>(false);
|
||||
//form
|
||||
const [form] = Form.useForm();
|
||||
//当前用户信息
|
||||
const userData = getSessionUserData();
|
||||
|
||||
const cjColumns = [
|
||||
{
|
||||
title: '序号',
|
||||
valueType: 'index'
|
||||
},
|
||||
{
|
||||
title: '参拍人',
|
||||
dataIndex: 'supplierId',
|
||||
},
|
||||
{
|
||||
title: '出价（元）',
|
||||
dataIndex: 'price',
|
||||
},
|
||||
{
|
||||
title: '出价时间',
|
||||
dataIndex: 'bidTime',
|
||||
},
|
||||
];
|
||||
|
||||
const wzColumns = [
|
||||
{
|
||||
title: '所属OU组织',
|
||||
dataIndex: 'organization',
|
||||
},
|
||||
{
|
||||
title: '物资名称',
|
||||
dataIndex: 'materialName',
|
||||
},
|
||||
{
|
||||
title: '物料编码',
|
||||
dataIndex: 'materialCode',
|
||||
},
|
||||
{
|
||||
title: '物资厂家',
|
||||
dataIndex: 'manufacturer',
|
||||
},
|
||||
{
|
||||
title: '规格型号',
|
||||
dataIndex: 'specification',
|
||||
key: 'specification',
|
||||
},
|
||||
{
|
||||
title: '库龄',
|
||||
dataIndex: 'reservoirAge',
|
||||
},
|
||||
{
|
||||
title: '数量',
|
||||
dataIndex: 'amount',
|
||||
},
|
||||
{
|
||||
title: '计量单位',
|
||||
dataIndex: 'materialUnit',
|
||||
},
|
||||
{
|
||||
title: '单价',
|
||||
dataIndex: 'unitPrice',
|
||||
},
|
||||
{
|
||||
title: '统一目录名称',
|
||||
dataIndex: 'directoryName',
|
||||
},
|
||||
{
|
||||
title: '统一目录编码',
|
||||
dataIndex: 'directoryCode',
|
||||
},
|
||||
];
|
||||
|
||||
useEffect(() => {
|
||||
|
||||
init();
|
||||
|
||||
setTimeout(() => {
|
||||
//项目已结束
|
||||
if (overFlagRef.current) {
|
||||
return;
|
||||
}
|
||||
ref.current = setInterval(() => {
|
||||
getRedisBidData(tpId).then(res => {
|
||||
res = res !== null ? res : {};
|
||||
if (res.code === 200) {
|
||||
let data = res.data;
|
||||
timedRefreshData(data);
|
||||
if (Number(data.jssj) <= 0) {
|
||||
setOverFlag(true);
|
||||
clearInterval(ref.current);
|
||||
}
|
||||
} else {
|
||||
// clearInterval(ref.current);
|
||||
}
|
||||
})
|
||||
|
||||
}, timingInterval);
|
||||
|
||||
}, timingInterval);
|
||||
|
||||
}, []);
|
||||
|
||||
|
||||
const reloadData = () => {
|
||||
getRedisBidData(tpId).then(res => {
|
||||
if (res.code === 200) {
|
||||
let data = res.data;
|
||||
timedRefreshData(data);
|
||||
if (Number(data.jssj) <= 0) {
|
||||
setOverFlag(true);
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const timedRefreshData = (data: any) => {
|
||||
let participateData = [data.cpr, data.cjcs, data.wgr];
|
||||
getParticipateData(participateData);
|
||||
setCjDataSource(data.cjjl);
|
||||
setCurrentPrice(data.zgjg);
|
||||
setDelay(data.yscs);
|
||||
setCountDownTime(data.jssj);
|
||||
}
|
||||
/**
|
||||
* 倒计时结束
|
||||
*/
|
||||
const countDownOver = () => {
|
||||
setOverFlag(true);
|
||||
}
|
||||
|
||||
const getParticipateData = (arr: any[]) => {
|
||||
setParticipateData(
|
||||
<>
|
||||
<span>{arr[0]}人参拍</span>
|
||||
<span>{arr[1]}次出价</span>
|
||||
<span>{arr[2]}人围观</span>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
/**
|
||||
* 初始化
|
||||
*/
|
||||
const [range, rangeSet] = useState<any>(0)//加价幅度
|
||||
const init = () => {
|
||||
const roleID = getSessionRoleData().roleId;
|
||||
getAuctionViewAuctions(tpId).then(res => {
|
||||
if (res.code === 200) {
|
||||
let data = res.data;
|
||||
//判断项目是否结束
|
||||
if (data.yczt) {
|
||||
setOverFlag(data.yczt);
|
||||
overFlagRef.current = data.yczt;
|
||||
}
|
||||
findFile(data.gg.auctionBdwxcdfzp)
|
||||
setProjectName(data.xm.auction.projectName);
|
||||
setCurrentPrice(data.inner02_04);
|
||||
let participateData = [data.inner02_03.cprsl, data.inner02_03.xmcjcs, data.inner02_03.wgrsl];
|
||||
getParticipateData(participateData);
|
||||
setDelay(data.inner02_02.yscs);
|
||||
setCjDataSource(data.tab03_01);
|
||||
//状态 0围观 1 参拍
|
||||
setViewStatus(data.cprdm !== null ? '1' : '0');
|
||||
setStartingPrice(
|
||||
<>
|
||||
<span>起拍价：￥{digitalConversionAmount(String(data.gg.auctionJpjg), 2)}</span>
|
||||
<span>加价幅度：￥{digitalConversionAmount(String(data.gg.auctionJjfd), 2)}</span>
|
||||
<span>延时周期：{data.gg.auctionYszq}分钟/次</span>
|
||||
{
|
||||
data.cprdm !== null && roleID === '20003' && <span>竞拍代码：{data.cprdm}</span>
|
||||
}
|
||||
</>
|
||||
);
|
||||
rangeSet(Number(data.gg.auctionJjfd));//幅度
|
||||
// offerAPriceSet(Number(data.inner02_04));//出价
|
||||
//公告数据
|
||||
setNoticeData(
|
||||
<div style={{ paddingLeft: '25px' }}>
|
||||
<span dangerouslySetInnerHTML={{ __html: data.gg.htmlContent }}></span>
|
||||
<br />
|
||||
<br />
|
||||
<br />
|
||||
<span>竞拍公告附件：
|
||||
<ExtendUpload bid={data.gg.auctionGgfj} btnName="附件" uploadProps={{ disabled: true }} />
|
||||
</span>
|
||||
</div>
|
||||
)
|
||||
setAuctionMaterialsList(data.xm.auctionMaterialsList);
|
||||
subjectMatterIntroductionForm.setFieldsValue(data.gg);
|
||||
setSubjectMatterIntroductionBid(data.gg.auctionBdwqdfj);
|
||||
setLocationOfTheSubjectMatter(
|
||||
<>
|
||||
<li>标的物所在地：<span className="col333">{data.gg.auctionBdwwz}</span></li>
|
||||
<li>挂拍方：<span className="col333">{data.gg.auctionGpf}</span></li>
|
||||
<li>联系人：<span className="col333">{data.gg.auctionLxr}</span></li>
|
||||
<li>联系电话：<span className="col333">{data.gg.auctionLxdh}</span></li>
|
||||
</>
|
||||
)
|
||||
setEndTime(data.gg.auctionJpjssj);
|
||||
setCountDownTime(data.jpjssjTime);
|
||||
//围观+1
|
||||
if (data.cprdm == null) {
|
||||
updatetOnlookers(tpId).then(res => {
|
||||
|
||||
});
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const findFile = (id: string) => {
|
||||
getFilelist([id]).then(res => {
|
||||
let arr = []
|
||||
if (res?.success && res?.data.length > 0) {
|
||||
for (const item of res?.data) {
|
||||
arr.push(pictureDisplayPath + '?filePath=' + item.filePath);
|
||||
}
|
||||
}
|
||||
setAuctionImage(arr);
|
||||
setAuctionImageFlag(true);
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 出价
|
||||
*/
|
||||
const [offerAPrice, offerAPriceSet] = useState<any>('');
|
||||
const onSearch = () => {
|
||||
let value: any = Number(offerAPrice);
|
||||
if (isEmpty(value)) {
|
||||
message.info('请出价!');
|
||||
return;
|
||||
}
|
||||
|
||||
if (!amountMoney.test(value)) {
|
||||
message.info('请输入正确的格式(小数点前15位,小数点后2位)！');
|
||||
return;
|
||||
}
|
||||
if (Number(value) <= Number(currentPrice)) {
|
||||
message.info('请输入高于当前价的金额！');
|
||||
return;
|
||||
}
|
||||
// let differ = (Number(value) - Number(currentPrice)) % range
|
||||
let differ = (value * 1000 - currentPrice * 1000) % (range * 1000)
|
||||
if (differ !== 0) {
|
||||
message.info('请增加加价幅度整数倍的金额！');
|
||||
return;
|
||||
}
|
||||
//出价
|
||||
confirmBidOrNot(tpId, value);
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* 确认出价
|
||||
* @param tpId
|
||||
* @param value
|
||||
*/
|
||||
const confirmBidOrNot = (tpId: any, value: any) => {
|
||||
const orderBidPrice = (tpId: any, value: any) => {
|
||||
//出价
|
||||
putOrderBidPrice(tpId, value).then(res => {
|
||||
if (res.code === 200) {
|
||||
let data = res.data;
|
||||
if (data) {
|
||||
message.success('出价成功！');
|
||||
}
|
||||
reloadData();
|
||||
}
|
||||
})
|
||||
}
|
||||
Modal.confirm({
|
||||
content: "请确认出价",
|
||||
okText: '确认',
|
||||
cancelText: '取消',
|
||||
keyboard: false,
|
||||
centered: true,
|
||||
onCancel: () => { },
|
||||
onOk: () => orderBidPrice(tpId, value)
|
||||
});
|
||||
}
|
||||
/**
|
||||
* 我要参拍
|
||||
*/
|
||||
const toParticipate = () => {
|
||||
setIsModalVisible(true);
|
||||
form.setFieldsValue({
|
||||
"organizationName": userData.organizationName,
|
||||
"biddersCpr": userData.fullName,
|
||||
});
|
||||
}
|
||||
//参与竞拍
|
||||
const handleOk = () => {
|
||||
form.validateFields().then(values => {
|
||||
const fromData = {
|
||||
"auctionId": tpId,
|
||||
"biddersCpr": form.getFieldValue("biddersCpr"),
|
||||
"biddersLxdh": form.getFieldValue("biddersLxdh"),
|
||||
"biddersFj": form.getFieldValue("biddersFj"),
|
||||
"biddersBs": 0
|
||||
}
|
||||
setLoading(true);
|
||||
insertBidders(fromData).then(res => {
|
||||
if (res != null && res.message == "success") {
|
||||
message.success("参与竞拍成功！");
|
||||
setViewStatus('1');
|
||||
setIsModalVisible(false);
|
||||
}
|
||||
}).finally(() => {
|
||||
setLoading(false);
|
||||
});
|
||||
})
|
||||
};
|
||||
|
||||
const handleCancel = () => {
|
||||
setIsModalVisible(false);
|
||||
};
|
||||
//判断当前登录人是否有参拍人角色
|
||||
const isParticipant = () => {
|
||||
if (userData.authorityList?.length > 0) {
|
||||
for (const ite of userData.authorityList) {
|
||||
if (ite.roleCode == "ebtp-auction-participant") {//参拍人角色
|
||||
return true;
|
||||
}
|
||||
}
|
||||
return false;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
return (
|
||||
<Spin spinning={loading}>
|
||||
<div className="htmlWrap">
|
||||
{
|
||||
auctionImageFlag && <AuctionImage image={auctionImage} />
|
||||
}
|
||||
<div className="contentParts">
|
||||
{/* <!--核心区域--> */}
|
||||
<div className="mainText">
|
||||
<h4>{projectName}</h4>
|
||||
{/* <!--stateRed是正在进行的状态样式，去掉stateRed是竞拍结束状态样式--> */}
|
||||
<div className={overFlag ? 'stateBlock' : 'stateBlock stateRed'}>
|
||||
|
||||
{
|
||||
overFlag ? (
|
||||
<>
|
||||
<span className="stateIco">竞拍结束</span>
|
||||
<span className="staeTime">
|
||||
结束时间：{endTime}（延时{delay}次）
|
||||
</span>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<span className="stateIco">正在进行</span>
|
||||
<span className="staeTime">
|
||||
距离结束仅剩：
|
||||
<CountDownUtils countDown={countDownTime} countDownOver={() => countDownOver()} />（延时{delay}次）
|
||||
</span>
|
||||
|
||||
</>
|
||||
)
|
||||
}
|
||||
<p>
|
||||
{participateData}
|
||||
</p>
|
||||
</div>
|
||||
<div className="priceBlock">
|
||||
{overFlag ? '最终价：' : '当前价：'}<span>￥{digitalConversionAmount(String(currentPrice), 2)}</span>
|
||||
</div>
|
||||
{
|
||||
(!overFlag && isParticipant()) && (
|
||||
viewStatus === '1' ? (
|
||||
<div className="saleBlock">
|
||||
<>
|
||||
请出价：<span>￥</span>
|
||||
<Input type="text" maxLength={15} value={offerAPrice} autoComplete='off'
|
||||
onChange={(e) => offerAPriceSet(e.target.value)}
|
||||
/>
|
||||
<button type="button" onClick={onSearch} style={{ marginLeft: 8 }}>出价</button>
|
||||
<button type="button" style={{ marginLeft: 8 }} onClick={() => {
|
||||
let count: number = 0;
|
||||
if (!Number(offerAPrice)) {
|
||||
count = algebraicAddition(currentPrice, range);
|
||||
offerAPriceSet(count);
|
||||
} else {
|
||||
count = algebraicAddition(offerAPrice, range);
|
||||
offerAPriceSet(count);
|
||||
}
|
||||
message.success(`加价${range},当前价格为${count}`);
|
||||
}}>+{range}</button>
|
||||
|
||||
</>
|
||||
</div>
|
||||
) : (
|
||||
<div style={{ marginBottom: 12 }}>
|
||||
<Button type='primary' key="participate" onClick={() => toParticipate()}>我要参拍</Button>
|
||||
</div>
|
||||
)
|
||||
)
|
||||
}
|
||||
<div className="otherInform">
|
||||
{startingPrice}
|
||||
</div>
|
||||
</div>
|
||||
<div className="rightInform">
|
||||
<ul>
|
||||
{locationOfTheSubjectMatter}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Divider />
|
||||
<Row>
|
||||
<Col span={24}>
|
||||
<Tabs defaultActiveKey="1" size={'large'} centered>
|
||||
<TabPane tab="竞拍公告" key="1">
|
||||
<Divider>竞拍公告</Divider>
|
||||
{noticeData}
|
||||
</TabPane>
|
||||
<TabPane tab="标的物介绍" key="2">
|
||||
<Divider>标的物介绍</Divider>
|
||||
<Form form={subjectMatterIntroductionForm} labelCol={{ span: 3 }}>
|
||||
<Form.Item
|
||||
label="标的物介绍"
|
||||
name="auctionBdwjs">
|
||||
<Input bordered={false} readOnly />
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
label="标的物预估重量(kg)"
|
||||
name="auctionBdwygzl">
|
||||
<Input bordered={false} readOnly />
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
label="标的物预估体积(m³)"
|
||||
name="auctionBdwygtj">
|
||||
<Input bordered={false} readOnly />
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
label="标的物账面价值(元)"
|
||||
name="auctionBdwzmjz">
|
||||
<Input bordered={false} readOnly />
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
label="标的物在库时间(天)"
|
||||
name="auctionBdwzksj">
|
||||
<Input bordered={false} readOnly />
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
label="标的物位置"
|
||||
name="auctionBdwwz">
|
||||
<Input bordered={false} readOnly />
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
label="标的物清单附件"
|
||||
name="auctionBdwqdfj">
|
||||
<ExtendUpload bid={subjectMatterIntroductionBid} btnName="附件" uploadProps={{ disabled: true }} />
|
||||
</Form.Item>
|
||||
|
||||
{/* <Form.Item
|
||||
label="物资清单"
|
||||
>
|
||||
<ProTable
|
||||
dataSource={auctionMaterialsList}
|
||||
columns={wzColumns}
|
||||
pagination={false}
|
||||
search={false}
|
||||
options={false}
|
||||
rowKey="id"
|
||||
/>
|
||||
</Form.Item> */}
|
||||
<ProTable
|
||||
headerTitle="物资清单"
|
||||
dataSource={auctionMaterialsList}
|
||||
columns={wzColumns}
|
||||
pagination={false}
|
||||
search={false}
|
||||
options={false}
|
||||
rowKey="id"
|
||||
/>
|
||||
</Form>
|
||||
</TabPane>
|
||||
<TabPane tab="出价记录" key="3">
|
||||
<Divider>出价记录</Divider>
|
||||
<ProTable
|
||||
dataSource={cjDataSource}
|
||||
columns={cjColumns}
|
||||
search={false}
|
||||
options={false}
|
||||
pagination={{ defaultPageSize: 10 }}
|
||||
rowKey="id"
|
||||
/>
|
||||
</TabPane>
|
||||
</Tabs>
|
||||
</Col>
|
||||
</Row>
|
||||
<Modal
|
||||
title="我要参拍"
|
||||
destroyOnClose
|
||||
centered
|
||||
visible={isModalVisible}
|
||||
onOk={handleOk}
|
||||
onCancel={handleCancel}
|
||||
okButtonProps={{
|
||||
loading: loading,
|
||||
}}
|
||||
width={600}
|
||||
>
|
||||
<Spin spinning={loading}>
|
||||
<Form
|
||||
{...layout}
|
||||
name="basic"
|
||||
form={form}
|
||||
>
|
||||
<Form.Item
|
||||
label="参拍方"
|
||||
name="organizationName"
|
||||
>
|
||||
<Input disabled={true} />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label="参拍人"
|
||||
name="biddersCpr"
|
||||
rules={[{ required: true, message: '请填写此项' }]}
|
||||
>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label="联系电话"
|
||||
name="biddersLxdh"
|
||||
rules={[
|
||||
{
|
||||
pattern: /^[1][3,4,5,6,7,8,9][0-9]{9}$/,
|
||||
message: '请输入正确的手机号'
|
||||
}
|
||||
]}
|
||||
>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label="附件"
|
||||
name="biddersFj"
|
||||
extra="最多上传一个文件，每个最大30MB"
|
||||
>
|
||||
<ExtendUpload bid="" maxCount={1} maxSize={30} uploadProps={{ disabled: false }}>
|
||||
</ExtendUpload>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</Spin>
|
||||
</Modal>
|
||||
</div>
|
||||
|
||||
|
||||
</Spin>
|
||||
)
|
||||
}
|
||||
export default AuctionViewAuctions;
|
||||
12
src/pages/Auction/AuctionParticipateDetail/index.tsx
Normal file
12
src/pages/Auction/AuctionParticipateDetail/index.tsx
Normal file
@ -0,0 +1,12 @@
|
||||
import React from 'react';
|
||||
import AuctionViewAuctions from './components/AuctionViewAuctions';
|
||||
|
||||
const Index: React.FC = () => {
|
||||
return (
|
||||
<>
|
||||
<AuctionViewAuctions />
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default Index;
|
||||
109
src/pages/Auction/AuctionParticipateList/index.less
Normal file
109
src/pages/Auction/AuctionParticipateList/index.less
Normal file
@ -0,0 +1,109 @@
|
||||
.header {
|
||||
display: flex;
|
||||
height: 56px;
|
||||
color: white;
|
||||
font-size: 20px;
|
||||
background-color: #b30000;
|
||||
|
||||
.headerAlign {
|
||||
align-self: center;
|
||||
margin-left: 20px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.rightBtns {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
|
||||
li {
|
||||
float: left;
|
||||
padding: 0 14px;
|
||||
color: #fff;
|
||||
font-weight: 400 !important;
|
||||
font-size: 14px;
|
||||
line-height: 56px;
|
||||
list-style: none;
|
||||
|
||||
span {
|
||||
padding-right: 6px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.auction-start-time {
|
||||
margin-top: 4px;
|
||||
padding: 2px 0px;
|
||||
color: #b30000;
|
||||
background: #f2f2f2;
|
||||
font-size: 90%;
|
||||
font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
|
||||
text-align: center;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.auction-final-time {
|
||||
margin-top: 4px;
|
||||
padding: 2px 0px;
|
||||
color: #b30000;
|
||||
font-size: 90%;
|
||||
font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
|
||||
text-align: center;
|
||||
border: 1px solid #b30000;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.site-input-group-wrapper .site-input-split {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.site-input-group-wrapper .site-input-right {
|
||||
border-left-width: 0;
|
||||
}
|
||||
|
||||
.site-input-group-wrapper .site-input-right {
|
||||
border-left-width: 0;
|
||||
}
|
||||
|
||||
.site-input-group-wrapper .site-input-right:hover,
|
||||
.site-input-group-wrapper .site-input-right:focus {
|
||||
border-left-width: 1px;
|
||||
}
|
||||
|
||||
.site-input-group-wrapper .ant-input-rtl.site-input-right {
|
||||
border-right-width: 0;
|
||||
}
|
||||
|
||||
.site-input-group-wrapper .ant-input-rtl.site-input-right:hover,
|
||||
.site-input-group-wrapper .ant-input-rtl.site-input-right:focus {
|
||||
border-right-width: 1px;
|
||||
}
|
||||
|
||||
.auction-wks-tag {
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
left: 4px;
|
||||
margin: 0px;
|
||||
font-size: 90%;
|
||||
padding: 3px 12px;
|
||||
background: #aaaaaa;
|
||||
color: #fff;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.auction-jpz-tag {
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
left: 4px;
|
||||
margin: 0px;
|
||||
font-size: 90%;
|
||||
padding: 3px 12px;
|
||||
background: #b30000;
|
||||
color: #fff;
|
||||
border: none;
|
||||
}
|
||||
296
src/pages/Auction/AuctionParticipateList/index.tsx
Normal file
296
src/pages/Auction/AuctionParticipateList/index.tsx
Normal file
@ -0,0 +1,296 @@
|
||||
import React, { useEffect, useRef, useState } from 'react';
|
||||
import { Avatar, Card, DatePicker, Descriptions, Input, List, Radio, Space, Tag, Typography } from 'antd';
|
||||
import './index.less';
|
||||
import styles from './index.less';
|
||||
import logo from '@/images/opening/logo.svg';
|
||||
import { UserSwitchOutlined, CarryOutOutlined, EnvironmentOutlined } from '@ant-design/icons';
|
||||
import moment from 'moment';
|
||||
import { getSessionUserData } from '@/utils/session';
|
||||
import { getProvince } from '../AuctionAnnouncementData/service';
|
||||
import { getList, getSfbm } from './service';
|
||||
import { saveDateTimeFormatter } from '@/utils/DateUtils';
|
||||
import { isNotEmpty } from '@/utils/CommonUtils';
|
||||
|
||||
export default () => {
|
||||
//获取用户数据
|
||||
let userData = getSessionUserData();
|
||||
//省数据
|
||||
const [sfbms, setSfbms] = useState<string[]>([]);
|
||||
//商品列表数据
|
||||
const [productList, setProductList] = useState<any[]>([]);
|
||||
//loading
|
||||
const [loading, setLoading] = useState<boolean>(false);
|
||||
//所属省份
|
||||
const sfbm = useRef<string>('all');
|
||||
//拍卖状态
|
||||
const zt = useRef<string>('all');
|
||||
//当前/起拍价-最低价
|
||||
const zdjg = useRef<string>('');
|
||||
//当前/起拍价-最高价
|
||||
const zgjg = useRef<string>('');
|
||||
//拍卖时间-开始日期
|
||||
const kssj = useRef<string>('');
|
||||
//拍卖时间-结束日期
|
||||
const jssj = useRef<string>('');
|
||||
//省字典
|
||||
const provinces = useRef<any[]>([]);
|
||||
//最低价ref
|
||||
const zdjgRef = useRef<any>();
|
||||
//最高价ref
|
||||
const zgjgRef = useRef<any>();
|
||||
//页码
|
||||
const pageNo = useRef<number>(1);
|
||||
const { Text } = Typography;
|
||||
//查询
|
||||
const getParticipateList = async () => {
|
||||
const params = {
|
||||
pageNo: pageNo.current,
|
||||
pageSize: 12,
|
||||
}
|
||||
sfbm.current != 'all' ? params['sfbm'] = [sfbm.current] : null;
|
||||
zt.current != 'all' ? params['zt'] = zt.current : null;
|
||||
isNotEmpty(zdjg.current) ? params['zdjg'] = zdjg.current : null;
|
||||
isNotEmpty(zgjg.current) ? params['zgjg'] = zgjg.current : null;
|
||||
isNotEmpty(kssj.current) ? params['kssj'] = kssj.current : null;
|
||||
isNotEmpty(jssj.current) ? params['jssj'] = jssj.current : null;
|
||||
setLoading(true);
|
||||
await getList(params).then(res => {
|
||||
if (res?.code == 200) {
|
||||
setProductList(res?.data.records);
|
||||
}
|
||||
}).finally(() => {
|
||||
setLoading(false);
|
||||
})
|
||||
}
|
||||
//获取省份字典及数据
|
||||
const getProvinces = async () => {
|
||||
await getProvince().then(res => {
|
||||
if (res?.code == 200) {
|
||||
provinces.current = res?.data;
|
||||
}
|
||||
})
|
||||
//获取省份数据
|
||||
await getSfbm().then(res => {
|
||||
if (res?.code == 200) {
|
||||
setSfbms(res?.data);
|
||||
}
|
||||
})
|
||||
}
|
||||
//省份名称转换
|
||||
const getProvinceName = (id: string) => {
|
||||
if (provinces.current.length > 0) {
|
||||
for (const item of provinces.current) {
|
||||
if (item.id == id) {
|
||||
return item.name;
|
||||
}
|
||||
}
|
||||
}
|
||||
return null;
|
||||
}
|
||||
const sfbmChange = (e: any) => {
|
||||
sfbm.current = e.target.value;
|
||||
pageNo.current = 1;
|
||||
getParticipateList();
|
||||
}
|
||||
const bidOpeningStatusChange = (e: any) => {
|
||||
zt.current = e.target.value;
|
||||
pageNo.current = 1;
|
||||
getParticipateList();
|
||||
}
|
||||
const zdjgBlur = (e: any) => {
|
||||
e.persist();
|
||||
if (zdjg.current !== e.target.value) {
|
||||
zdjg.current = e.target.value;
|
||||
pageNo.current = 1;
|
||||
getParticipateList();
|
||||
}
|
||||
}
|
||||
const zgjgBlur = (e: any) => {
|
||||
e.persist();
|
||||
if (zgjg.current !== e.target.value) {
|
||||
zgjg.current = e.target.value;
|
||||
pageNo.current = 1;
|
||||
getParticipateList();
|
||||
}
|
||||
}
|
||||
const sjChange = (times: any) => {
|
||||
if (times?.length > 0) {
|
||||
kssj.current = saveDateTimeFormatter(times[0].startOf('day'));
|
||||
jssj.current = saveDateTimeFormatter(times[1].endOf('day'));
|
||||
pageNo.current = 1;
|
||||
getParticipateList();
|
||||
} else {
|
||||
kssj.current = '';
|
||||
jssj.current = '';
|
||||
pageNo.current = 1;
|
||||
getParticipateList();
|
||||
}
|
||||
}
|
||||
const pageChange = (page: number) => {
|
||||
pageNo.current = page;
|
||||
getParticipateList();
|
||||
}
|
||||
//点击商品进入详情
|
||||
const cardClick = (id: string) => {
|
||||
console.log('cardClick', id)
|
||||
let projectData = {
|
||||
id: id
|
||||
};
|
||||
sessionStorage.setItem('projectData', JSON.stringify(projectData));
|
||||
window.open("/AuctionParticipateDetail");
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
getProvinces();
|
||||
getParticipateList();
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className={styles.header}>
|
||||
<div className={styles.headerAlign} style={{ position: "absolute", left: "0px", top: "15px", fontSize: "16px", fontWeight: "600" }}>
|
||||
<img src={logo} style={{ height: "30px", marginRight: "10px", position: 'relative', top: '-2px' }} />中国联通智慧供应链平台 ｜ 招标采购中心
|
||||
</div>
|
||||
<ul className={styles.rightBtns}>
|
||||
<li><CarryOutOutlined />{moment().format("YYYY-MM-DD")}</li>
|
||||
{userData?.organizationName == null ? null : (<li><UserSwitchOutlined />{userData.organizationName}</li>)}
|
||||
<li>
|
||||
<Avatar size="small" src="https://gw.alipayobjects.com/zos/antfincdn/XAosXuNZyF/BiazfanxmamNRoxxVxka.png" style={{ width: '30px' }} />
|
||||
<a className="antd-dropdown-link" style={{ color: "#fff", marginRight: "36px" }}>
|
||||
{userData.fullName}
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div style={{ display: 'flex', justifyContent: 'center', height: innerHeight - 57, overflowY: 'auto' }}>
|
||||
<div style={{ width: 1248 }}>
|
||||
<Descriptions
|
||||
bordered={true}
|
||||
column={1}
|
||||
labelStyle={{ background: '#f2f2f2', width: '15%', textAlign: 'center' }}
|
||||
contentStyle={{ padding: "12px 20px" }}
|
||||
style={{ margin: '16px 0px' }}
|
||||
>
|
||||
<Descriptions.Item label="所属省份">
|
||||
<Radio.Group defaultValue="all" buttonStyle="solid" onChange={sfbmChange}>
|
||||
<Space wrap>
|
||||
<Radio.Button value="all" key="all">不限</Radio.Button>
|
||||
{sfbms.map(item => <Radio.Button value={item} key={item}>{getProvinceName(item)}</Radio.Button>)}
|
||||
</Space>
|
||||
</Radio.Group>
|
||||
</Descriptions.Item>
|
||||
<Descriptions.Item label="拍卖状态">
|
||||
<Radio.Group defaultValue="all" buttonStyle="solid" onChange={bidOpeningStatusChange}>
|
||||
<Space wrap>
|
||||
<Radio.Button value="all">不限</Radio.Button>
|
||||
<Radio.Button value="0">未开始</Radio.Button>
|
||||
<Radio.Button value="1">竞拍中</Radio.Button>
|
||||
</Space>
|
||||
</Radio.Group>
|
||||
</Descriptions.Item>
|
||||
<Descriptions.Item label="当前/起拍价">
|
||||
<div className="site-input-group-wrapper">
|
||||
<Input.Group compact>
|
||||
<Input
|
||||
style={{ width: 150, textAlign: 'center' }}
|
||||
placeholder="最低价"
|
||||
prefix="￥"
|
||||
allowClear
|
||||
maxLength={11}
|
||||
type="number"
|
||||
ref={zdjgRef}
|
||||
id="zdjgId"
|
||||
onBlur={(event) => zdjgBlur(event)}
|
||||
onPressEnter={() => zdjgRef.current.blur()}
|
||||
/>
|
||||
<Input
|
||||
className="site-input-split"
|
||||
style={{
|
||||
width: 30,
|
||||
borderLeft: 0,
|
||||
borderRight: 0,
|
||||
pointerEvents: 'none',
|
||||
}}
|
||||
placeholder="~"
|
||||
disabled
|
||||
/>
|
||||
<Input
|
||||
className="site-input-right"
|
||||
style={{
|
||||
width: 150,
|
||||
textAlign: 'center',
|
||||
}}
|
||||
placeholder="最高价"
|
||||
allowClear
|
||||
maxLength={11}
|
||||
type="number"
|
||||
ref={zgjgRef}
|
||||
onBlur={(event) => zgjgBlur(event)}
|
||||
onPressEnter={() => zgjgRef.current.blur()}
|
||||
/>
|
||||
</Input.Group>
|
||||
</div>
|
||||
</Descriptions.Item>
|
||||
<Descriptions.Item label="开拍时间">
|
||||
<DatePicker.RangePicker style={{ width: '328px' }} onChange={sjChange} />
|
||||
</Descriptions.Item>
|
||||
</Descriptions>
|
||||
<List
|
||||
grid={{ gutter: 16, column: 4 }}
|
||||
dataSource={productList}
|
||||
loading={loading}
|
||||
pagination={{
|
||||
size: "small",
|
||||
hideOnSinglePage: true,
|
||||
onChange: page => pageChange(page),
|
||||
pageSize: 12,
|
||||
}}
|
||||
renderItem={item => (
|
||||
<List.Item>
|
||||
<Card
|
||||
hoverable
|
||||
bodyStyle={{
|
||||
padding: 0,
|
||||
MozUserSelect: 'none',/* Firefox私有属性 */
|
||||
WebkitUserSelect: 'none',/* WebKit内核私有属性 */
|
||||
msUserSelect: 'none',/* IE私有属性(IE10及以后) */
|
||||
userSelect: 'none'/* CSS3属性 */
|
||||
}}
|
||||
cover={
|
||||
<img
|
||||
alt="example"
|
||||
height="245px"
|
||||
src="https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png"
|
||||
/>
|
||||
}
|
||||
onClick={() => cardClick(item.id)}
|
||||
>
|
||||
<div className={item.bidOpeningStatus == "0" ? 'auction-start-time' : 'auction-final-time'}>
|
||||
{item.bidOpeningStatus == "0" ? `竞拍开始时间:${moment(item.jpkssj).format('YYYY年MM月DD日HH时mm分ss秒')}` : `竞拍结束时间:${moment(item.jpjssj).format('YYYY年MM月DD日HH时mm分ss秒')}`}
|
||||
</div>
|
||||
<div style={{ padding: "10px 12px 12px 16px" }}>
|
||||
<div>
|
||||
<Text>{item.projectName}</Text>
|
||||
</div>
|
||||
<div style={{ marginTop: 6 }}>
|
||||
<div style={{ textAlign: 'right' }}>
|
||||
<Text style={{ fontSize: '90%' }}>
|
||||
<EnvironmentOutlined style={{ color: '#aaaaaa' }} />{getProvinceName(item.sfbm)}
|
||||
</Text>
|
||||
</div>
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end' }}>
|
||||
<Text strong style={{ fontSize: 'large', color: item.bidOpeningStatus == "0" ? '#4b7902' : '#b30000' }}>{item.bidOpeningStatus == "0" ? `起拍价：${item.qpjg}元` : `当前价：${item.dqjg}元`}</Text>
|
||||
<Text type={item.bidOpeningStatus == "0" ? "secondary" : void 0} style={{ fontSize: '90%' }}>{item.offerNumber}次出价</Text>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Tag className={item.bidOpeningStatus == "0" ? "auction-wks-tag" : "auction-jpz-tag"}>{item.bidOpeningStatus == "0" ? '未开始' : '竞拍中'}</Tag>
|
||||
</Card>
|
||||
</List.Item>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
};
|
||||
20
src/pages/Auction/AuctionParticipateList/service.ts
Normal file
20
src/pages/Auction/AuctionParticipateList/service.ts
Normal file
@ -0,0 +1,20 @@
|
||||
import request from '@/utils/request';
|
||||
|
||||
/**
|
||||
* 获取省份数据
|
||||
* @returns
|
||||
*/
|
||||
export async function getSfbm() {
|
||||
return request('/api/biz-service-ebtp-auction/v1/innerShot/getProvince');
|
||||
}
|
||||
/**
|
||||
* 查询商品列表
|
||||
* @param data
|
||||
* @returns
|
||||
*/
|
||||
export async function getList(data: any) {
|
||||
return request('/api/biz-service-ebtp-auction/v1/innerShot/libraryTube/getPageList', {
|
||||
method: 'POST',
|
||||
data: data,
|
||||
});
|
||||
}
|
||||
Reference in New Issue
Block a user