4 changed files with 714 additions and 48 deletions
-
126src/pages/OperationCenter/OtherBusiness/ParkingCard/ParkingCardMgm/loadable.jsx
-
137src/pages/OperationCenter/OtherBusiness/ParkingCard/ParkingCardOrder/index.scss
-
477src/pages/OperationCenter/OtherBusiness/ParkingCard/ParkingCardOrder/loadable.jsx
-
20src/services/OperationCenter/ParkingCardMgm/index.js
@ -1,15 +1,472 @@ |
|||
import React, { useState, useRef, useEffect } from "react"; |
|||
// import { message, Pagination, Table, Space, Modal, } from "antd"; |
|||
// import { dictionary, utils } from "@/config/common"; |
|||
// import moment from 'moment' |
|||
// import { useSessionStorageState, useUpdateEffect, useSize, useUpdate } from 'ahooks'; |
|||
// import ajax from "@/services" |
|||
// import { FormInput, FormSelect, OptionPanel, ResultPanel, FormSliderPicker, AreaCascader, ImgResize, ImgZoom, } from "@/components" |
|||
// import "./index.scss"; |
|||
// import errorImg from "@/assets/images/layout/error.png" |
|||
// import { useLocation } from "react-router-dom"; |
|||
import { Select, Input, Popconfirm,Button, Table, message, DatePicker, Pagination, Radio, Space, Cascader, Popover, Modal, InputNumber,Transfer, Descriptions } from 'antd' |
|||
import { |
|||
pageSizeOptions |
|||
} from '@/config/character.config.js' |
|||
import { ResultFlowResult } from "@/components" |
|||
import { SearchOutlined, PlusOutlined,VerticalAlignBottomOutlined } from '@ant-design/icons'; |
|||
import moment from 'moment' |
|||
import { useSetState,} from 'ahooks'; |
|||
import ajax from "@/services" |
|||
import "./index.scss"; |
|||
const { RangePicker } = DatePicker; |
|||
function ParkingCardOrder() { |
|||
return <div>ParkingCardOrder</div> |
|||
// 列表列数据 |
|||
const tableColumns = [ |
|||
{ |
|||
title: '车牌号', |
|||
dataIndex: 'plate', |
|||
key: 'plate', |
|||
}, |
|||
{ |
|||
title: '车牌颜色', |
|||
dataIndex: 'plate_type', |
|||
key: 'plate_type', |
|||
}, |
|||
{ |
|||
title: '手机号', |
|||
dataIndex: 'phone', |
|||
key: 'phone', |
|||
}, |
|||
{ |
|||
title: '商品名称', |
|||
dataIndex: 'name', |
|||
key: 'name', |
|||
}, |
|||
{ |
|||
title: '实付金额', |
|||
dataIndex: 'sale_amount', |
|||
key: 'sale_amount', |
|||
}, |
|||
{ |
|||
title: '支付渠道', |
|||
dataIndex: 'channel', |
|||
key: 'channel', |
|||
}, |
|||
{ |
|||
title: '支付设备', |
|||
dataIndex: 'equipment', |
|||
key: 'equipment', |
|||
}, |
|||
{ |
|||
title: '购买渠道', |
|||
dataIndex: 'purchase', |
|||
key: 'purchase', |
|||
}, |
|||
{ |
|||
title: '支付时间', |
|||
dataIndex: 'pay_time', |
|||
key: 'pay_time', |
|||
}, |
|||
{ |
|||
title: '订单状态', |
|||
dataIndex: 'status', |
|||
key: 'status', |
|||
}, |
|||
{ |
|||
title: '渠道流水号', |
|||
dataIndex: 'serial_number', |
|||
key: 'serial_number', |
|||
}, |
|||
{ |
|||
title: '操作', |
|||
render:(text,record) => { |
|||
return( |
|||
<> |
|||
<Popover content={ |
|||
<div className="operateBtn"> |
|||
<div onClick={() => { }}>查看</div> |
|||
<div onClick={() => { }}>修改</div> |
|||
</div>}> |
|||
<button className="scheduleBtn colorBtn">操作</button> |
|||
</Popover> |
|||
</> |
|||
) |
|||
} |
|||
} |
|||
] |
|||
const [formData, setFormData] = useSetState({ |
|||
plate:'', //车牌号 |
|||
phone:'', //手机号 |
|||
name:'', //商品名称 |
|||
purchase:"0",//购买渠道 |
|||
status:'0',//订单状态 |
|||
channel:'0',//支付渠道 |
|||
equipment:"0",//支付设备 |
|||
serial_number:'',//渠道流水号 |
|||
start_time: "",//支付开始时间 |
|||
end_time: "",//支付结束时间 |
|||
pn: 1, |
|||
page_size: Number(pageSizeOptions[0]), // 每页条数 |
|||
}) |
|||
|
|||
const [lastFormData, setLastFormData] = useState(formData) |
|||
|
|||
const lastFormDataRef = useRef(formData) |
|||
|
|||
const [resultData, setResultData] = useState({ |
|||
data: [], |
|||
total: 0, |
|||
export_url: '', |
|||
process_url: "" |
|||
}) |
|||
// 不可选择的日期 |
|||
const disabledDate = (current) => { |
|||
return current && current < moment().startOf('day'); |
|||
}; |
|||
|
|||
// 检索数据 |
|||
const getSearchData = (data = formData) => { |
|||
getData(data) |
|||
} |
|||
// 加载 |
|||
const [ajaxLoading, setAjaxLoading] = useState(false) |
|||
// 获取列表数据 |
|||
const getData = (data = formData) => { |
|||
setAjaxLoading(true) |
|||
|
|||
ajax.getCardOrderList(data).then(res => { |
|||
setAjaxLoading(false) |
|||
if (res.status === 20000) { |
|||
let resDataArr = res.data.list.map((item) => { |
|||
item.key = item.id |
|||
return item |
|||
}) |
|||
setResultData({ |
|||
...resultData, |
|||
data: resDataArr, |
|||
total: res.data.total |
|||
}) |
|||
}else { |
|||
setResultData({ |
|||
data: [], |
|||
total: 0, |
|||
export_url: '', |
|||
process_url: "" |
|||
}) |
|||
message.error(res.message) |
|||
} |
|||
}).catch(err => console.log(err)) |
|||
} |
|||
//切换分页 |
|||
const changePn = (pn, length) => { |
|||
if (lastFormData.page_size === length) { |
|||
setFormData(Object.assign({}, formData, { pn: pn, page_size: length })) |
|||
setLastFormData(Object.assign({}, lastFormData, { pn: pn })) |
|||
lastFormDataRef.current = Object.assign({}, lastFormData, { pn: pn }) |
|||
getData(Object.assign({}, formData, { pn: pn, page_size: length })) |
|||
} |
|||
} |
|||
//切换每页条数 |
|||
const changeLength = (pn, length) => { |
|||
setFormData(Object.assign({}, formData, { pn: 1, page_size: length })) |
|||
setLastFormData(Object.assign({}, lastFormData, { pn: 1, page_size: length })) |
|||
lastFormDataRef.current = Object.assign({}, lastFormData, { pn: 1, page_size: length }) |
|||
getData(Object.assign({}, formData, { pn: 1, page_size: length })) |
|||
} |
|||
useEffect(() => { |
|||
getData() |
|||
}, []) |
|||
return ( |
|||
<div className="paid-ParkingCardMgm"> |
|||
<div className="paid-search"> |
|||
<label className="search">查询条件</label> |
|||
<div className="yisa-search"> |
|||
<label>车牌号</label> |
|||
<Input |
|||
placeholder="请输入内容" |
|||
value={formData.plate} |
|||
style={{ width: 270,marginLeft:15 }} |
|||
onChange={e => { setFormData({ plate: e.target.value }) } } |
|||
/> |
|||
</div> |
|||
<div className="yisa-search"> |
|||
<label>手机号</label> |
|||
<Input |
|||
placeholder="请输入内容" |
|||
value={formData.phone} |
|||
style={{ width: 270,marginLeft:15 }} |
|||
onChange={e => { setFormData({ phone: e.target.value }) } } |
|||
/> |
|||
</div> |
|||
<div className="yisa-search"> |
|||
<label>商品名称</label> |
|||
<Input |
|||
placeholder="请输入商品名称" |
|||
value={formData.name} |
|||
style={{ width: 270 }} |
|||
onChange={e => { setFormData({ name: e.target.value }) } } |
|||
/> |
|||
</div> |
|||
<div className="yisa-search"> |
|||
<label>购买渠道</label> |
|||
<Select |
|||
style={{ width: 270}} |
|||
value={formData.purchase} |
|||
placeholder="请选择" |
|||
options={[ |
|||
{ |
|||
value: '0', |
|||
label: "全部" |
|||
}, |
|||
{ |
|||
value: '1', |
|||
label: '线上录入' |
|||
}, |
|||
{ |
|||
value: '2', |
|||
label: '后台录入' |
|||
} |
|||
]} |
|||
onChange={e=>{setFormData({purchase:e}) }} |
|||
/> |
|||
</div> |
|||
<div className="yisa-search"> |
|||
<label>订单状态</label> |
|||
<Select |
|||
style={{ width: 270 }} |
|||
value={formData.status} |
|||
placeholder="请选择" |
|||
options={[ |
|||
{ |
|||
value: '0', |
|||
label: "全部" |
|||
}, |
|||
{ |
|||
value: '1', |
|||
label: '未生效' |
|||
}, |
|||
{ |
|||
value: '2', |
|||
label: '生效中' |
|||
}, |
|||
{ |
|||
value: '3', |
|||
label: '已失效' |
|||
} |
|||
]} |
|||
onChange={e=>{setFormData({status:e}) }} |
|||
/> |
|||
</div> |
|||
<div className="yisa-search"> |
|||
<label>支付渠道</label> |
|||
<Select |
|||
style={{ width: 270}} |
|||
value={formData.channel} |
|||
placeholder="请选择" |
|||
options={[ |
|||
{ |
|||
value: '0', |
|||
label: "全部" |
|||
}, |
|||
{ |
|||
value: '1', |
|||
label: '系统自动扣款' |
|||
}, |
|||
{ |
|||
value: '2', |
|||
label: '微信公众号' |
|||
}, |
|||
{ |
|||
value: '3', |
|||
label: 'MS' |
|||
}, |
|||
{ |
|||
value: '4', |
|||
label: "PDA" |
|||
}, |
|||
{ |
|||
value: '5', |
|||
label: '开放平台支付' |
|||
}, |
|||
{ |
|||
value: '6', |
|||
label: '扫码抢' |
|||
}, |
|||
{ |
|||
value: '7', |
|||
label: '微信小程序' |
|||
}, |
|||
{ |
|||
value: '8', |
|||
label: '支付宝生活号' |
|||
}, |
|||
{ |
|||
value: '9', |
|||
label: '支付宝小程序' |
|||
}, |
|||
{ |
|||
value: '10', |
|||
label: '自主缴费机' |
|||
}, |
|||
{ |
|||
value: '11', |
|||
label: '后台录入' |
|||
}, |
|||
{ |
|||
value: '12', |
|||
label: 'H5' |
|||
}, |
|||
{ |
|||
value: '13', |
|||
label: 'ETC' |
|||
} |
|||
]} |
|||
onChange={e=>{setFormData({channel:e}) }} |
|||
/> |
|||
</div> |
|||
<div className="yisa-search"> |
|||
<label>支付设备</label> |
|||
<Select |
|||
style={{ width: 270 }} |
|||
value={formData.equipment} |
|||
placeholder="请选择" |
|||
options={[ |
|||
{ |
|||
value: '0', |
|||
label: "全部" |
|||
}, |
|||
{ |
|||
value: '1', |
|||
label: '系统自动扣款' |
|||
}, |
|||
{ |
|||
value: '2', |
|||
label: '微信公众号' |
|||
}, |
|||
{ |
|||
value: '3', |
|||
label: 'MS' |
|||
}, |
|||
{ |
|||
value: '4', |
|||
label: "PDA" |
|||
}, |
|||
{ |
|||
value: '5', |
|||
label: '开放平台支付' |
|||
}, |
|||
{ |
|||
value: '6', |
|||
label: '扫码抢' |
|||
}, |
|||
{ |
|||
value: '7', |
|||
label: '微信小程序' |
|||
}, |
|||
{ |
|||
value: '8', |
|||
label: '支付宝生活号' |
|||
}, |
|||
{ |
|||
value: '9', |
|||
label: '支付宝小程序' |
|||
}, |
|||
{ |
|||
value: '10', |
|||
label: '自主缴费机' |
|||
}, |
|||
{ |
|||
value: '11', |
|||
label: '后台录入' |
|||
}, |
|||
{ |
|||
value: '12', |
|||
label: 'H5' |
|||
}, |
|||
{ |
|||
value: '13', |
|||
label: 'ETC' |
|||
} |
|||
]} |
|||
onChange={e=>{setFormData({equipment:e}) }} |
|||
/> |
|||
</div> |
|||
<div className="yisa-search"> |
|||
<label>支付时间</label> |
|||
<RangePicker |
|||
style={{ width: 270 }} |
|||
disabledDate={disabledDate} |
|||
// disabledTime={disabledRangeTime} |
|||
showTime |
|||
onChange={(dates, dateStrings) => { |
|||
setFormData({start_time:dateStrings[0],end_time:dateStrings[1]}) |
|||
}} |
|||
format="YYYY-MM-DD HH:mm:ss" |
|||
value={ |
|||
formData.start_time == '' && formData.end_time == '' ? |
|||
[] : |
|||
[moment(formData.start_time),moment(formData.end_time)] |
|||
} |
|||
/> |
|||
</div> |
|||
<div className="yisa-search"> |
|||
<label style={{marginLeft:"-5px"}}>渠道流水号</label> |
|||
<Input |
|||
placeholder="请输入渠道流水号" |
|||
value={formData.serial_number} |
|||
style={{ width: 270 }} |
|||
onChange={e => { setFormData({ serial_number: e.target.value }) } } |
|||
/> |
|||
</div> |
|||
<div className="timePicker yisa-search"> |
|||
<div className="btnBox"> |
|||
<Button |
|||
type="primary" |
|||
className="yisa-btn colorBtn" |
|||
icon={<SearchOutlined />} |
|||
onClick={()=>getSearchData()}> |
|||
搜索 |
|||
</Button> |
|||
<Button |
|||
type="primary" |
|||
className="yisa-btn colorBtn" |
|||
icon={<PlusOutlined />} |
|||
onClick={() => { }} |
|||
style={{width:110}}> |
|||
添加订单 |
|||
</Button> |
|||
<Button |
|||
type="primary" |
|||
className="yisa-btn exportBtn" |
|||
icon={<VerticalAlignBottomOutlined />} |
|||
onClick={() => { }} |
|||
style={{background:"#fff",color:'#59b7ff'}} |
|||
> |
|||
导出 |
|||
</Button> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div className="paid-result"> |
|||
<div className="result"> |
|||
<span className="font">共检索到<em>{resultData.total}</em>条结果</span> |
|||
<ResultFlowResult ajaxLoad={ajaxLoading} resultData={resultData.data ? resultData.data : []}> |
|||
<Table |
|||
bordered |
|||
// className='yisa-table' |
|||
dataSource={resultData.data} |
|||
columns={tableColumns} |
|||
pagination={false} |
|||
loading={ajaxLoading} |
|||
/> |
|||
<Pagination |
|||
className="pagination-common" |
|||
showSizeChanger |
|||
showQuickJumper |
|||
showTotal={() => `共 ${resultData.total} 条`} |
|||
total={resultData.total} |
|||
current={lastFormData.pn} |
|||
pageSize={lastFormData.page_size} |
|||
pageSizeOptions={pageSizeOptions} |
|||
onChange={changePn} |
|||
onShowSizeChange={changeLength} |
|||
/> |
|||
</ResultFlowResult> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
) |
|||
} |
|||
|
|||
export default ParkingCardOrder; |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue