4 changed files with 714 additions and 48 deletions
-
128src/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 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() { |
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; |
export default ParkingCardOrder; |
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue