|
|
|
@ -8,8 +8,10 @@ import { SearchOutlined, PlusOutlined,VerticalAlignBottomOutlined } from '@ant-d |
|
|
|
import moment from 'moment' |
|
|
|
import { useSetState,} from 'ahooks'; |
|
|
|
import ajax from "@/services" |
|
|
|
import utils from "../../../../../config/utils"; |
|
|
|
import "./index.scss"; |
|
|
|
const { RangePicker } = DatePicker; |
|
|
|
const { TextArea } = Input; |
|
|
|
function ParkingCardOrder() { |
|
|
|
// 列表列数据 |
|
|
|
const tableColumns = [ |
|
|
|
@ -37,6 +39,11 @@ function ParkingCardOrder() { |
|
|
|
title: '实付金额', |
|
|
|
dataIndex: 'sale_amount', |
|
|
|
key: 'sale_amount', |
|
|
|
render:(text) => { |
|
|
|
return ( |
|
|
|
<span>{text}元</span> |
|
|
|
) |
|
|
|
} |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: '支付渠道', |
|
|
|
@ -75,8 +82,8 @@ function ParkingCardOrder() { |
|
|
|
<> |
|
|
|
<Popover content={ |
|
|
|
<div className="operateBtn"> |
|
|
|
<div onClick={() => { }}>查看</div> |
|
|
|
<div onClick={() => { }}>修改</div> |
|
|
|
<div onClick={() => { handleDetail(record)}}>查看</div> |
|
|
|
<div onClick={() => { handleUpData(record)}}>修改</div> |
|
|
|
</div>}> |
|
|
|
<button className="scheduleBtn colorBtn">操作</button> |
|
|
|
</Popover> |
|
|
|
@ -85,6 +92,49 @@ function ParkingCardOrder() { |
|
|
|
} |
|
|
|
} |
|
|
|
] |
|
|
|
// 详情数据列表的列 |
|
|
|
const detailColumns = [ |
|
|
|
{ |
|
|
|
title: '序号', |
|
|
|
dataIndex: 'id', |
|
|
|
key: 'id', |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: '车牌号', |
|
|
|
dataIndex: 'plate', |
|
|
|
key: 'plate', |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: '车牌颜色', |
|
|
|
dataIndex: 'plate_type', |
|
|
|
key: 'plate_type', |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: '手机号', |
|
|
|
dataIndex: 'phone', |
|
|
|
key: 'phone', |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: '绑定时间', |
|
|
|
dataIndex: 'binding_time', |
|
|
|
key: 'binding_time', |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: '操作人', |
|
|
|
dataIndex: 'user', |
|
|
|
key: 'user', |
|
|
|
}, |
|
|
|
] |
|
|
|
|
|
|
|
// 弹框内容字段 |
|
|
|
let modalParams = { |
|
|
|
plate:'', |
|
|
|
plate_type:'', |
|
|
|
phone:'', |
|
|
|
name:'', |
|
|
|
} |
|
|
|
|
|
|
|
// 检索页表单 |
|
|
|
const [formData, setFormData] = useSetState({ |
|
|
|
plate:'', //车牌号 |
|
|
|
phone:'', //手机号 |
|
|
|
@ -110,6 +160,30 @@ function ParkingCardOrder() { |
|
|
|
export_url: '', |
|
|
|
process_url: "" |
|
|
|
}) |
|
|
|
|
|
|
|
// 添加弹框展示 |
|
|
|
const [addVisible, setAddVisible] = useState(false) |
|
|
|
|
|
|
|
// 添加和修改的标志 |
|
|
|
const [actionType, setActionType] = useState(1) // 1为添加 2为修改 |
|
|
|
|
|
|
|
// 添加订单 |
|
|
|
const [addOrderData, setAddOrderData] = useSetState(modalParams) |
|
|
|
|
|
|
|
// 停车卡名字下拉 |
|
|
|
const [cardNameSelect, setCardNameSelect] = useState([]) |
|
|
|
|
|
|
|
// 查看或修改的展示与隐藏 |
|
|
|
const [isShowDetail, setIsShowDetail] = useState(false) |
|
|
|
|
|
|
|
// 列表中的每行数据 |
|
|
|
const [listItem, setListItem] = useState({}) |
|
|
|
|
|
|
|
// 修改订单 |
|
|
|
const [updataOrder, setUpdataOrder] = useSetState({}) |
|
|
|
|
|
|
|
// 详情表格数据 |
|
|
|
const [detailTableData, setDetailTableData] = useState([]) |
|
|
|
// 不可选择的日期 |
|
|
|
const disabledDate = (current) => { |
|
|
|
return current && current < moment().startOf('day'); |
|
|
|
@ -164,10 +238,126 @@ function ParkingCardOrder() { |
|
|
|
lastFormDataRef.current = Object.assign({}, lastFormData, { pn: 1, page_size: length }) |
|
|
|
getData(Object.assign({}, formData, { pn: 1, page_size: length })) |
|
|
|
} |
|
|
|
|
|
|
|
// 查看 |
|
|
|
const handleDetail =(data) => { |
|
|
|
setActionType("1") |
|
|
|
setIsShowDetail(true) |
|
|
|
setListItem(data) |
|
|
|
setDetailTableData({ |
|
|
|
|
|
|
|
}) |
|
|
|
} |
|
|
|
|
|
|
|
// 修改 |
|
|
|
const handleUpData = (data) => { |
|
|
|
setActionType("2") |
|
|
|
setIsShowDetail(true) |
|
|
|
setListItem(data) |
|
|
|
} |
|
|
|
//下载 |
|
|
|
const Donwload = (url) => { |
|
|
|
var link = document.createElement("a"); |
|
|
|
link.setAttribute("target", "_blank"); |
|
|
|
link.style.display = "none"; |
|
|
|
link.href = url ? url : ""; |
|
|
|
document.body.appendChild(link); |
|
|
|
link.click(); |
|
|
|
document.body.removeChild(link); |
|
|
|
}; |
|
|
|
|
|
|
|
// 导出 |
|
|
|
const ReportPaySummaryReport = () => { |
|
|
|
ajax.exportOrder(formData).then(res => { |
|
|
|
if (parseInt(res?.status) === 20000){ |
|
|
|
Donwload(res.data?.url) |
|
|
|
} |
|
|
|
else { |
|
|
|
message.error(res?.message); |
|
|
|
} |
|
|
|
}).catch(e => |
|
|
|
console.log(e)) |
|
|
|
} |
|
|
|
// 添加订单 |
|
|
|
const addCardOrder = () => { |
|
|
|
setActionType(1) |
|
|
|
setAddVisible(true) |
|
|
|
} |
|
|
|
|
|
|
|
// 停车卡名称下拉 |
|
|
|
const getSelectCardData = () => { |
|
|
|
ajax.selectCardOrder().then(res => { |
|
|
|
if(res.status == 20000){ |
|
|
|
setCardNameSelect(res.data) |
|
|
|
} |
|
|
|
}).catch(e => console.log(e)) |
|
|
|
} |
|
|
|
|
|
|
|
// 保存订单 |
|
|
|
const placeSaveBtn = () =>{ |
|
|
|
let data = { |
|
|
|
...addOrderData, |
|
|
|
effective_days:undefined, |
|
|
|
days:undefined, |
|
|
|
scope:undefined |
|
|
|
} |
|
|
|
let phoneReg = new RegExp(/^(?:(?:\+|00)86)?1[3-9]\d{9}$/) |
|
|
|
|
|
|
|
if(addOrderData.plate != ''&& !utils?.validationPlate(addOrderData.plate)){ |
|
|
|
message.error('请输入正确的车牌号') |
|
|
|
return |
|
|
|
} |
|
|
|
else if(addOrderData.plate == ''){ |
|
|
|
message.error('请输入车牌号') |
|
|
|
return |
|
|
|
}else if(addOrderData.plate_type == ''){ |
|
|
|
message.error('请选择车牌颜色') |
|
|
|
return |
|
|
|
}else if(!phoneReg.test(addOrderData.phone)){ |
|
|
|
message.error('请输入正确的手机号') |
|
|
|
return |
|
|
|
}else if(addOrderData.name == ''){ |
|
|
|
message.error('请选择停车卡名称') |
|
|
|
return |
|
|
|
}else{ |
|
|
|
ajax.saveCardOrder(data).then((res) => { |
|
|
|
if (res.status === 20000) { |
|
|
|
setAddVisible(false) |
|
|
|
setAddOrderData(modalParams) |
|
|
|
getData(formData) |
|
|
|
message.success("保存成功") |
|
|
|
} |
|
|
|
}).catch(err => { |
|
|
|
console.log(err); |
|
|
|
}) |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
// 停车卡名字下拉 |
|
|
|
const handleCardName = (e) => { |
|
|
|
let data = cardNameSelect.find(item => item.value == e) |
|
|
|
console.log(data); |
|
|
|
setAddOrderData({ |
|
|
|
name:e, |
|
|
|
effective_days:data.effective_days, |
|
|
|
days:data.days, |
|
|
|
scope:data.scope, |
|
|
|
card_id:data.card_id |
|
|
|
}) |
|
|
|
} |
|
|
|
|
|
|
|
// 取消按钮 |
|
|
|
const placeBtn = () => { |
|
|
|
setAddVisible(false) |
|
|
|
setAddOrderData(modalParams) |
|
|
|
} |
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
getData() |
|
|
|
getSelectCardData() |
|
|
|
}, []) |
|
|
|
return ( |
|
|
|
<> |
|
|
|
<div className="paid-ParkingCardMgm"> |
|
|
|
<div className="paid-search"> |
|
|
|
<label className="search">查询条件</label> |
|
|
|
@ -422,7 +612,7 @@ function ParkingCardOrder() { |
|
|
|
type="primary" |
|
|
|
className="yisa-btn colorBtn" |
|
|
|
icon={<PlusOutlined />} |
|
|
|
onClick={() => { }} |
|
|
|
onClick={() => {addCardOrder()}} |
|
|
|
style={{width:110}}> |
|
|
|
添加订单 |
|
|
|
</Button> |
|
|
|
@ -430,8 +620,8 @@ function ParkingCardOrder() { |
|
|
|
type="primary" |
|
|
|
className="yisa-btn exportBtn" |
|
|
|
icon={<VerticalAlignBottomOutlined />} |
|
|
|
onClick={() => { }} |
|
|
|
style={{background:"#fff",color:'#59b7ff'}} |
|
|
|
onClick={() => { ReportPaySummaryReport()}} |
|
|
|
style={{background:"#fff",color:'#59b7ff',height:'100%'}} |
|
|
|
> |
|
|
|
导出 |
|
|
|
</Button> |
|
|
|
@ -440,8 +630,10 @@ function ParkingCardOrder() { |
|
|
|
</div> |
|
|
|
<div className="paid-result"> |
|
|
|
<div className="result"> |
|
|
|
<span className="font">共检索到<em>{resultData.total}</em>条结果</span> |
|
|
|
<ResultFlowResult ajaxLoad={ajaxLoading} resultData={resultData.data ? resultData.data : []}> |
|
|
|
{!isShowDetail ? |
|
|
|
<> |
|
|
|
<span className="font">共检索到<em>{resultData.total}</em>条结果</span> |
|
|
|
<ResultFlowResult ajaxLoad={ajaxLoading} resultData={resultData.data ? resultData.data : []}> |
|
|
|
<Table |
|
|
|
bordered |
|
|
|
// className='yisa-table' |
|
|
|
@ -462,10 +654,267 @@ function ParkingCardOrder() { |
|
|
|
onChange={changePn} |
|
|
|
onShowSizeChange={changeLength} |
|
|
|
/> |
|
|
|
</ResultFlowResult> |
|
|
|
</ResultFlowResult> |
|
|
|
</> : |
|
|
|
<> |
|
|
|
<p className="detail-title">订单详情</p> |
|
|
|
<div className="carTitle"> |
|
|
|
<span className="font">订单信息</span> |
|
|
|
</div> |
|
|
|
<div className="detail-list"> |
|
|
|
<Descriptions |
|
|
|
labelStyle={{wordBreak:"keep-all"}} |
|
|
|
> |
|
|
|
<Descriptions.Item |
|
|
|
style={{ margin: '20px' }} |
|
|
|
label="订单状态" |
|
|
|
span={3}> |
|
|
|
{listItem?.status || '---'} |
|
|
|
</Descriptions.Item> |
|
|
|
<Descriptions.Item style={{ margin: '20px' }} label="支付时间" span={3}> |
|
|
|
{listItem?.pay_time || '---'} |
|
|
|
</Descriptions.Item> |
|
|
|
<Descriptions.Item |
|
|
|
style={{ margin: '20px' }} |
|
|
|
label={ |
|
|
|
<> |
|
|
|
{ |
|
|
|
actionType == '2' && |
|
|
|
<em style={{marginRight:'5px',marginLeft:'-13px',color:'red'}}>*</em> |
|
|
|
} |
|
|
|
<span>车牌号</span> |
|
|
|
</> |
|
|
|
} |
|
|
|
span={1.5} |
|
|
|
> |
|
|
|
{ |
|
|
|
actionType == "1" ? |
|
|
|
<span> |
|
|
|
{listItem?.plate || '---'} |
|
|
|
</span> |
|
|
|
: |
|
|
|
<div className="yisa-search"> |
|
|
|
<Input |
|
|
|
// placeholder="请输入内容" |
|
|
|
value={listItem.plate} |
|
|
|
style={{ width: 250, marginLeft: 10 }} |
|
|
|
maxLength={30} |
|
|
|
onChange={(e) => setUpdataOrder({plate:e.target.value})} |
|
|
|
/> |
|
|
|
</div> |
|
|
|
} |
|
|
|
</Descriptions.Item> |
|
|
|
<Descriptions.Item |
|
|
|
style={{ margin: '20px' }} |
|
|
|
label={ |
|
|
|
<> |
|
|
|
{ |
|
|
|
actionType == '2' && |
|
|
|
<em style={{marginRight:'5px',marginLeft:'-13px',color:'red'}}>*</em> |
|
|
|
} |
|
|
|
<span>车牌颜色</span> |
|
|
|
</> |
|
|
|
} |
|
|
|
span={1.5} |
|
|
|
> |
|
|
|
{ |
|
|
|
actionType == "1" ? |
|
|
|
<span> |
|
|
|
{listItem?.plate_type || '---'} |
|
|
|
</span> |
|
|
|
: |
|
|
|
<div className="yisa-search"> |
|
|
|
<Input |
|
|
|
// placeholder="请输入内容" |
|
|
|
value={listItem.plate_type} |
|
|
|
style={{ width: 250, marginLeft: 10 }} |
|
|
|
maxLength={30} |
|
|
|
onChange={(e) => setUpdataOrder({plate_type:e.target.value})} |
|
|
|
/> |
|
|
|
</div> |
|
|
|
} |
|
|
|
</Descriptions.Item> |
|
|
|
<Descriptions.Item style={{ margin: '20px' }} label="购买渠道" span={1.5}> |
|
|
|
{listItem?.purchase || '---'} |
|
|
|
</Descriptions.Item> |
|
|
|
<Descriptions.Item style={{ margin: '20px' }} label="实付金额" span={1.5}> |
|
|
|
<span>{listItem?.sale_amount || '---'}元</span> |
|
|
|
</Descriptions.Item> |
|
|
|
<Descriptions.Item style={{ margin: '20px' }} label="支付渠道" span={1.5}> |
|
|
|
{listItem?.channel || '---'} |
|
|
|
</Descriptions.Item> |
|
|
|
<Descriptions.Item style={{ margin: '20px' }} label="支付设备" span={1.5}> |
|
|
|
{listItem?.equipment || '---'} |
|
|
|
</Descriptions.Item> |
|
|
|
</Descriptions> |
|
|
|
</div> |
|
|
|
<div className="carTitle"> |
|
|
|
<span className="font">商品信息</span> |
|
|
|
</div> |
|
|
|
<div className="detail-list"> |
|
|
|
<Descriptions |
|
|
|
labelStyle={{wordBreak:"keep-all"}} |
|
|
|
> |
|
|
|
<Descriptions.Item |
|
|
|
style={{ margin: '20px' }} |
|
|
|
label="商品名称" |
|
|
|
span={3}> |
|
|
|
{listItem?.name || '---'} |
|
|
|
</Descriptions.Item> |
|
|
|
<Descriptions.Item style={{ margin: '20px' }} label="商户名称" span={3}> |
|
|
|
{listItem?.operator || '---'} |
|
|
|
</Descriptions.Item> |
|
|
|
<Descriptions.Item style={{ margin: '20px' }} label="适用范围" span={3}> |
|
|
|
{listItem?.scope || '---'} |
|
|
|
</Descriptions.Item> |
|
|
|
<Descriptions.Item style={{ margin: '20px' }} label="生效开始日期" span={3}> |
|
|
|
{listItem?.effective_start || '---'} |
|
|
|
</Descriptions.Item> |
|
|
|
<Descriptions.Item style={{ margin: '20px' }} label="有效天数" span={3}> |
|
|
|
{listItem?.effective_days || '---'} |
|
|
|
</Descriptions.Item> |
|
|
|
<Descriptions.Item style={{ margin: '20px' }} label="生效结束日期" span={1.5}> |
|
|
|
{listItem?.effective_end || '---'} |
|
|
|
</Descriptions.Item> |
|
|
|
</Descriptions> |
|
|
|
</div> |
|
|
|
<div className="carTitle"> |
|
|
|
<span className="font">车辆绑定信息</span> |
|
|
|
</div> |
|
|
|
<div className="detail-list"> |
|
|
|
<Table |
|
|
|
bordered |
|
|
|
// dataSource={listItem} |
|
|
|
columns={detailColumns} |
|
|
|
pagination={false} |
|
|
|
/> |
|
|
|
</div> |
|
|
|
</> |
|
|
|
} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<Modal |
|
|
|
visible={addVisible} |
|
|
|
onCancel={placeBtn} |
|
|
|
footer={null} |
|
|
|
title={''} |
|
|
|
className="parkModal" |
|
|
|
destroyOnClose={true} |
|
|
|
style={{top:"30px"}} |
|
|
|
> |
|
|
|
<div className="carTitle"> |
|
|
|
<span className="font">{actionType == 1 ? '添加订单' : '修改订单'}</span> |
|
|
|
</div> |
|
|
|
<div className="add"> |
|
|
|
<div className="yisa-search"> |
|
|
|
<em style={{marginRight:'5px',marginLeft:'-13px',color:'red'}}>*</em> |
|
|
|
<label>车牌号</label> |
|
|
|
<Input |
|
|
|
placeholder="请输入内容" |
|
|
|
value={addOrderData.plate} |
|
|
|
style={{ width: 250, marginLeft: 38}} |
|
|
|
maxLength={30} |
|
|
|
onChange={(e) => {setAddOrderData({plate:e.target.value})}} |
|
|
|
/> |
|
|
|
</div> |
|
|
|
<div className="yisa-search"> |
|
|
|
<em style={{marginRight:'5px',marginLeft:'-13px',color:'red'}}>*</em> |
|
|
|
<label>车牌颜色</label> |
|
|
|
<Select |
|
|
|
style={{ width: 250, marginLeft: 23 }} |
|
|
|
value={addOrderData.plate_type} |
|
|
|
options={[ |
|
|
|
{ |
|
|
|
value: '0', |
|
|
|
label: "蓝" |
|
|
|
}, |
|
|
|
{ |
|
|
|
value: '1', |
|
|
|
label: '黄' |
|
|
|
}, |
|
|
|
{ |
|
|
|
value: '2', |
|
|
|
label: '绿' |
|
|
|
}, |
|
|
|
{ |
|
|
|
value: '3', |
|
|
|
label: "黄绿" |
|
|
|
}, |
|
|
|
{ |
|
|
|
value: '4', |
|
|
|
label: '黑' |
|
|
|
}, |
|
|
|
{ |
|
|
|
value: '5', |
|
|
|
label: '黑' |
|
|
|
} |
|
|
|
]} |
|
|
|
onChange={(e) => {setAddOrderData({plate_type:e})}} |
|
|
|
/> |
|
|
|
</div> |
|
|
|
<div className="yisa-search"> |
|
|
|
<label>手机号</label> |
|
|
|
<Input |
|
|
|
placeholder="请输入内容" |
|
|
|
value={addOrderData.phone} |
|
|
|
style={{ width: 250, marginLeft: 35 }} |
|
|
|
maxLength={30} |
|
|
|
onChange={(e) => {setAddOrderData({phone:e.target.value})}} |
|
|
|
/> |
|
|
|
</div> |
|
|
|
<div className="yisa-search"> |
|
|
|
<em style={{marginRight:'5px',marginLeft:'-13px',color:'red'}}>*</em> |
|
|
|
<label>停车卡名称</label> |
|
|
|
<Select |
|
|
|
style={{ width: 250, marginLeft: 10 }} |
|
|
|
value={addOrderData.name} |
|
|
|
options={cardNameSelect} |
|
|
|
onChange={handleCardName} |
|
|
|
/> |
|
|
|
</div> |
|
|
|
<div className="yisa-search"> |
|
|
|
<em style={{marginRight:'5px',marginLeft:'-13px',color:'red'}}>*</em> |
|
|
|
<label style={{display:'inline-block',marginBottom:10}}>适用范围</label> |
|
|
|
<TextArea |
|
|
|
disabled={true} |
|
|
|
value={addOrderData.scope} |
|
|
|
style={{ width: 250, marginLeft: 20 }} |
|
|
|
/> |
|
|
|
</div> |
|
|
|
{ |
|
|
|
addOrderData.name && |
|
|
|
<> |
|
|
|
|
|
|
|
<div className="yisa-search"> |
|
|
|
<em style={{marginRight:'5px',marginLeft:'-13px',color:'red'}}>*</em> |
|
|
|
<label>自购买后 <span style={{color:'#409eff',fontSize:16}}>{addOrderData.days}天</span> 开始生效</label> |
|
|
|
</div> |
|
|
|
<div className="yisa-search"> |
|
|
|
<em style={{marginRight:'5px',marginLeft:'-13px',color:'red'}}>*</em> |
|
|
|
<label>有效天数</label> |
|
|
|
<InputNumber |
|
|
|
controls={false} |
|
|
|
// placeholder="请输入内容" |
|
|
|
value={addOrderData.effective_days} |
|
|
|
style={{ width: 250, marginLeft: 20 }} |
|
|
|
disabled={true} |
|
|
|
/> |
|
|
|
</div> |
|
|
|
</> |
|
|
|
} |
|
|
|
</div> |
|
|
|
<div className="submitBtn"> |
|
|
|
<button type="primary" className="submit colorBtn" onClick={() => { placeSaveBtn() }}> |
|
|
|
保存 |
|
|
|
</button> |
|
|
|
<button type="primary" className="cancel colorReset" onClick={() => { placeBtn() }}> |
|
|
|
取消 |
|
|
|
</button> |
|
|
|
</div> |
|
|
|
</Modal> |
|
|
|
</> |
|
|
|
|
|
|
|
) |
|
|
|
} |
|
|
|
|
