|
|
|
@ -1,6 +1,6 @@ |
|
|
|
import React, { useState, useRef, useEffect } from "react"; |
|
|
|
import { ResultFlowResult } from "@/components" |
|
|
|
import { Select, Input, Button, Table, message, Pagination, Popover, Modal, Checkbox, Radio } from 'antd' |
|
|
|
import { ResultFlowResult ,FormSliderPicker } from "@/components" |
|
|
|
import { Select, Input, Button, Tabs, Table, message, Pagination, Popover, Modal, DatePicker, Radio } from 'antd' |
|
|
|
import { |
|
|
|
pageSizeOptions |
|
|
|
} from '@/config/character.config.js' |
|
|
|
@ -8,6 +8,9 @@ import "./index.scss"; |
|
|
|
import { SearchOutlined } from '@ant-design/icons'; |
|
|
|
import ajax from '@/services' |
|
|
|
import { useSessionStorageState } from "ahooks" |
|
|
|
import moment from "moment"; |
|
|
|
const { RangePicker } = DatePicker; |
|
|
|
const { TabPane } = Tabs; |
|
|
|
const { TextArea } = Input; |
|
|
|
function FreeRule(props) { |
|
|
|
const [ajaxLoading, setAjaxLoading] = useState(false) |
|
|
|
@ -20,11 +23,19 @@ function FreeRule(props) { |
|
|
|
const parameter = { |
|
|
|
operate_name: '0',//所属商户 |
|
|
|
pn: 1, |
|
|
|
road: '',//路段 |
|
|
|
berth: '',//泊位 |
|
|
|
plate: '',//车牌号 |
|
|
|
start_time: moment().format('YYYY-MM-DD 00:00:00'), |
|
|
|
end_time: moment().format("YYYY-MM-DD 23:59:59"), |
|
|
|
tab: '1', |
|
|
|
page_size: Number(pageSizeOptions[0]), // 每页条数 |
|
|
|
} |
|
|
|
const [formData, setFormData] = useState(parameter) |
|
|
|
const [lastFormData, setLastFormData] = useState(formData) |
|
|
|
const [parkFormData, setParkFormData] = useState(formData) |
|
|
|
const lastFormDataRef = useRef(formData) |
|
|
|
const parkFormDataRef = useRef(formData) |
|
|
|
const [addVisible, setAddVisible] = useState(false) |
|
|
|
const [picVisible, setPicVisible] = useState(false) |
|
|
|
const [checkVisible, setCheckVisible] = useState(false) |
|
|
|
@ -34,6 +45,26 @@ function FreeRule(props) { |
|
|
|
const handleOperator = (v) => { |
|
|
|
setFormData({ ...formData, operate_name: v }) |
|
|
|
} |
|
|
|
//车牌号 |
|
|
|
const handlePlate = (v) => { |
|
|
|
setFormData({ ...formData, plate: v.target.value }) |
|
|
|
} |
|
|
|
//路段 |
|
|
|
const handleRoad = (v) => { |
|
|
|
setFormData({ ...formData, road: v.target.value }) |
|
|
|
} |
|
|
|
//泊位 |
|
|
|
const handleBreth = (v) => { |
|
|
|
setFormData({ ...formData, berth: v.target.value }) |
|
|
|
} |
|
|
|
//进场时间 |
|
|
|
const onHandleDateChange = (v) => { |
|
|
|
setFormData({ |
|
|
|
...formData, |
|
|
|
start_time: v.startDateTime, |
|
|
|
end_time: v.endDateTime |
|
|
|
}) |
|
|
|
} |
|
|
|
//列表 |
|
|
|
const handleColumns = (tab) => { |
|
|
|
let result = [...deployListColumns]; |
|
|
|
@ -78,6 +109,77 @@ function FreeRule(props) { |
|
|
|
</> |
|
|
|
}, |
|
|
|
},] |
|
|
|
// 切换Tab |
|
|
|
const changeTab = (key) => { |
|
|
|
let obj = Object.assign({}, parameter, { |
|
|
|
tab: key, |
|
|
|
}) |
|
|
|
setFormData(JSON.parse(JSON.stringify(obj))) |
|
|
|
|
|
|
|
lastFormDataRef.current = obj |
|
|
|
if (key === '1') { |
|
|
|
getData(obj) |
|
|
|
} |
|
|
|
if (key === '2') { |
|
|
|
getParkDataList(obj) |
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
const handleApplyColumns = (tab) => { |
|
|
|
let result = [...applyColumns]; |
|
|
|
return result; |
|
|
|
} |
|
|
|
const applyColumns = [ |
|
|
|
{ |
|
|
|
title: "序号", |
|
|
|
render: (text, record, index) => index + 1, |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: "车牌号", |
|
|
|
dataIndex: 'plate', |
|
|
|
key: 'plate', |
|
|
|
}, { |
|
|
|
title: "车牌颜色", |
|
|
|
dataIndex: 'plate_color', |
|
|
|
key: 'plate_color', |
|
|
|
}, { |
|
|
|
title: "车辆类型", |
|
|
|
dataIndex: 'car_type', |
|
|
|
key: 'car_type', |
|
|
|
}, { |
|
|
|
title: "路段", |
|
|
|
dataIndex: 'road', |
|
|
|
key: 'road', |
|
|
|
}, { |
|
|
|
title: "泊位", |
|
|
|
dataIndex: 'berth', |
|
|
|
key: 'berth', |
|
|
|
}, { |
|
|
|
title: "进场时间", |
|
|
|
dataIndex: 'come_time', |
|
|
|
key: 'come_time', |
|
|
|
}, { |
|
|
|
title: "离场时间", |
|
|
|
dataIndex: 'leave_time', |
|
|
|
key: 'leave_time', |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: "停车时长", |
|
|
|
dataIndex: 'park_time', |
|
|
|
key: 'park_time', |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: "进场收费员", |
|
|
|
dataIndex: 'come_person', |
|
|
|
key: 'come_person', |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: "离场收费员", |
|
|
|
dataIndex: 'leave_person', |
|
|
|
key: 'leave_person', |
|
|
|
} |
|
|
|
] |
|
|
|
console.log(formData); |
|
|
|
const [getCheckList, setGetCheckList] = useState({}) |
|
|
|
const checkBtn = (record) => { |
|
|
|
let data = { |
|
|
|
@ -94,8 +196,8 @@ function FreeRule(props) { |
|
|
|
setCheckVisible(false) |
|
|
|
} |
|
|
|
const [getEditList, setGetEditList] = useState({ |
|
|
|
operate_name:'', |
|
|
|
free_name:'' |
|
|
|
operate_name: '', |
|
|
|
free_name: '' |
|
|
|
}) |
|
|
|
const [getEditId, setGetEditId] = useState({}) |
|
|
|
const deleteApplyBtn = (record) => { |
|
|
|
@ -159,6 +261,33 @@ function FreeRule(props) { |
|
|
|
console.log(err) |
|
|
|
}) |
|
|
|
} |
|
|
|
const getParkDataList = (data = formData) => { |
|
|
|
setAjaxLoading(true) |
|
|
|
ajax.getAddFreePartList(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_records: res.data.total_records |
|
|
|
}) |
|
|
|
} else { |
|
|
|
setResultData({ |
|
|
|
data: [], |
|
|
|
total_records: 0, |
|
|
|
export_url: '', |
|
|
|
process_url: "" |
|
|
|
}) |
|
|
|
message.error(res.message) |
|
|
|
} |
|
|
|
}, err => { |
|
|
|
console.log(err) |
|
|
|
}) |
|
|
|
} |
|
|
|
//切换分页 |
|
|
|
const changePn = (pn, length) => { |
|
|
|
if (lastFormData.page_size === length) { |
|
|
|
@ -168,6 +297,14 @@ function FreeRule(props) { |
|
|
|
getData(Object.assign({}, formData, { pn: pn, page_size: length })) |
|
|
|
} |
|
|
|
} |
|
|
|
const changeParkPn = (pn, length) => { |
|
|
|
if (parkFormData.page_size === length) { |
|
|
|
setFormData(Object.assign({}, formData, { pn: pn, page_size: length })) |
|
|
|
setParkFormData(Object.assign({}, parkFormData, { pn: pn, page_size: length })) |
|
|
|
parkFormDataRef.current = Object.assign({}, parkFormData, { pn: pn, page_size: length }) |
|
|
|
getParkDataList(Object.assign({}, formData, { pn: pn, page_size: length })) |
|
|
|
} |
|
|
|
} |
|
|
|
//切换每页条数 |
|
|
|
const changeLength = (pn, length) => { |
|
|
|
setFormData(Object.assign({}, formData, { pn: 1, page_size: length })) |
|
|
|
@ -175,10 +312,27 @@ function FreeRule(props) { |
|
|
|
lastFormDataRef.current = Object.assign({}, lastFormData, { pn: 1, page_size: length }) |
|
|
|
getData(Object.assign({}, formData, { pn: 1, page_size: length })) |
|
|
|
} |
|
|
|
const changeParkLength = (pn, length) => { |
|
|
|
setFormData(Object.assign({}, formData, { pn: 1, page_size: length })) |
|
|
|
setParkFormData(Object.assign({}, parkFormData, { pn: 1, page_size: length })) |
|
|
|
parkFormDataRef.current = Object.assign({}, parkFormData, { pn: 1, page_size: length }) |
|
|
|
getParkDataList(Object.assign({}, formData, { pn: 1, page_size: length })) |
|
|
|
} |
|
|
|
//检索数据 |
|
|
|
const getSearchData = (data = formData) => { |
|
|
|
getData(data) |
|
|
|
} |
|
|
|
const getParkData = (data = formData) => { |
|
|
|
getParkDataList(data) |
|
|
|
} |
|
|
|
//重置数据 |
|
|
|
const resetData = () => { |
|
|
|
setFormData({ |
|
|
|
...parameter, |
|
|
|
tab: '2' |
|
|
|
}) |
|
|
|
getParkDataList({ ...parameter }) |
|
|
|
} |
|
|
|
const [getPicList, setGetPicList] = useState({}) |
|
|
|
//配置预付费 |
|
|
|
const configuration = () => { |
|
|
|
@ -227,14 +381,9 @@ function FreeRule(props) { |
|
|
|
} |
|
|
|
const handleDelete = (index) => { |
|
|
|
getFreeList.splice(index) |
|
|
|
console.log(index); |
|
|
|
let arr = getFreeList |
|
|
|
setGetFreeList([...arr]) |
|
|
|
} |
|
|
|
useEffect(() => { |
|
|
|
console.log(getFreeList); |
|
|
|
|
|
|
|
}, [getFreeList]) |
|
|
|
const addSubmit = () => { |
|
|
|
let data = { |
|
|
|
operate_name: getCheckData.operate_name, |
|
|
|
@ -276,7 +425,15 @@ function FreeRule(props) { |
|
|
|
useEffect(() => { |
|
|
|
if (sessionTabList && Object.values(sessionTabList).length > 0) { |
|
|
|
setFormData({ |
|
|
|
operate_name: sessionTabList?.operate_name |
|
|
|
operate_name: sessionTabList?.operate_name, |
|
|
|
pn: sessionTabList?.pn, |
|
|
|
road: sessionTabList?.road, |
|
|
|
berth: sessionTabList?.berth, |
|
|
|
plate: sessionTabList?.plate, |
|
|
|
start_time: sessionTabList?.start_time, |
|
|
|
end_time: sessionTabList?.end_time, |
|
|
|
tab: sessionTabList?.tab, |
|
|
|
page_size: sessionTabList?.page_size, |
|
|
|
}) |
|
|
|
} |
|
|
|
}, []) |
|
|
|
@ -294,26 +451,26 @@ function FreeRule(props) { |
|
|
|
message.error('请选择所属商户') |
|
|
|
} else if (getEditList.free_name === '') { |
|
|
|
message.error('请输入免费类型') |
|
|
|
} else{ |
|
|
|
} else { |
|
|
|
ajax.getAddEditFree(data).then(res => { |
|
|
|
if (res.status === 20000) { |
|
|
|
setEditVisible(false) |
|
|
|
getData(formData) |
|
|
|
setGetFreeList([]) |
|
|
|
}else{ |
|
|
|
} else { |
|
|
|
message.error(res.message) |
|
|
|
} |
|
|
|
}) |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
} |
|
|
|
const editcancel=()=>{ |
|
|
|
const editcancel = () => { |
|
|
|
setEditVisible(false) |
|
|
|
setGetFreeList([]) |
|
|
|
} |
|
|
|
const cancel = () => { |
|
|
|
setCheckVisible(false) |
|
|
|
|
|
|
|
|
|
|
|
setDeleteVisible(false) |
|
|
|
} |
|
|
|
const picCheckModal = () => { |
|
|
|
@ -335,59 +492,178 @@ function FreeRule(props) { |
|
|
|
}, []) |
|
|
|
return <> |
|
|
|
<div className="paid-FreeRule"> |
|
|
|
<div className="paid-search"> |
|
|
|
<label className="search">查询条件</label> |
|
|
|
<div className="yisa-search"> |
|
|
|
<label>商户名称</label> |
|
|
|
<Select |
|
|
|
style={{ width: 256 }} |
|
|
|
value={formData.operate_name} |
|
|
|
options={getOperationName} |
|
|
|
onChange={handleOperator} |
|
|
|
/> |
|
|
|
</div> |
|
|
|
<div className="timePicker "> |
|
|
|
<div className="btnBox"> |
|
|
|
<Button type="primary" className="yisa-btn colorBtn" icon={<SearchOutlined />} onClick={() => { getSearchData() }}> |
|
|
|
搜索 |
|
|
|
</Button> |
|
|
|
<Button type="primary" className="yisa-btn colorBtn" onClick={() => { configuration() }}> |
|
|
|
新增 |
|
|
|
</Button> |
|
|
|
<div className='tabchange'> |
|
|
|
<Tabs |
|
|
|
className="yisa-tabs" |
|
|
|
defaultActiveKey={formData.tab} |
|
|
|
onChange={(v) => { |
|
|
|
changeTab(v); |
|
|
|
}} |
|
|
|
activeKey={formData.tab} |
|
|
|
> |
|
|
|
<TabPane tab="免费规则" key="1" ></TabPane> |
|
|
|
<TabPane tab="公车停车记录" key="2"></TabPane> |
|
|
|
</Tabs> |
|
|
|
</div> |
|
|
|
<div className="searchResult"> |
|
|
|
<div className="paid-search"> |
|
|
|
<label className="search">查询条件</label> |
|
|
|
{ |
|
|
|
formData.tab === '1' ? |
|
|
|
<div className="yisa-search"> |
|
|
|
<label>商户名称</label> |
|
|
|
<Select |
|
|
|
style={{ width: 256 }} |
|
|
|
value={formData.operate_name} |
|
|
|
options={getOperationName} |
|
|
|
onChange={handleOperator} |
|
|
|
/> |
|
|
|
</div> : '' |
|
|
|
} |
|
|
|
{ |
|
|
|
formData.tab === '2' ? |
|
|
|
<div className="yisa-search" style={{ marginLeft: 13 }}> |
|
|
|
<label>车牌号</label> |
|
|
|
<Input |
|
|
|
placeholder="请输入车牌号" |
|
|
|
value={formData.plate} |
|
|
|
style={{ width: 256, marginLeft: 13 }} |
|
|
|
onChange={handlePlate} |
|
|
|
/> |
|
|
|
</div> : '' |
|
|
|
} |
|
|
|
{ |
|
|
|
formData.tab === '2' ? |
|
|
|
<div className="yisa-search" style={{ marginLeft: 26 }}> |
|
|
|
<label>路段</label> |
|
|
|
<Input |
|
|
|
placeholder="请输入路段" |
|
|
|
value={formData.road} |
|
|
|
style={{ width: 256, marginLeft: 13 }} |
|
|
|
onChange={handleRoad} |
|
|
|
/> |
|
|
|
</div> : '' |
|
|
|
} |
|
|
|
{ |
|
|
|
formData.tab === '2' ? |
|
|
|
<div className="yisa-search" style={{ marginLeft: 26 }}> |
|
|
|
<label>泊位</label> |
|
|
|
<Input |
|
|
|
placeholder="请输入泊位" |
|
|
|
value={formData.berth} |
|
|
|
style={{ width: 256, marginLeft: 13 }} |
|
|
|
onChange={handleBreth} |
|
|
|
/> |
|
|
|
</div> : '' |
|
|
|
} |
|
|
|
{ |
|
|
|
formData.tab === '2' ? |
|
|
|
<div style={{marginTop:10}}> |
|
|
|
{/* <RangePicker showNow={false} allowClear={false} value={moment(formData.start_time)} showTime style={{ width: 256, marginLeft: 13 }} onChange={handleTime} /> */} |
|
|
|
<FormSliderPicker |
|
|
|
yisaLabel='进场时间' |
|
|
|
defaultStartDateTime={moment(formData.start_time)} |
|
|
|
defaultEndDateTime={moment(formData.end_time)} |
|
|
|
yisaOnChange={onHandleDateChange} |
|
|
|
limit={730} |
|
|
|
showQuickMenu={false} |
|
|
|
/> |
|
|
|
</div> : '' |
|
|
|
} |
|
|
|
<div className="timePicker "> |
|
|
|
{ |
|
|
|
formData.tab === '1' ? |
|
|
|
<div className="btnBox"> |
|
|
|
<Button type="primary" className="yisa-btn colorBtn" icon={<SearchOutlined />} onClick={() => { getSearchData() }}> |
|
|
|
搜索 |
|
|
|
</Button> |
|
|
|
<Button type="primary" className="yisa-btn colorBtn" onClick={() => { configuration() }}> |
|
|
|
新增 |
|
|
|
</Button> |
|
|
|
</div> : '' |
|
|
|
} |
|
|
|
{ |
|
|
|
formData.tab === '2' ? |
|
|
|
<div className="btnBox"> |
|
|
|
<Button type="primary" className="yisa-btn colorBtn" icon={<SearchOutlined />} onClick={() => { getParkData() }}> |
|
|
|
搜索 |
|
|
|
</Button> |
|
|
|
<Button type="primary" className="yisa-btn colorBtn" onClick={() => { resetData() }}> |
|
|
|
重置 |
|
|
|
</Button> |
|
|
|
</div> : '' |
|
|
|
} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div className="paid-result"> |
|
|
|
<div className="result"> |
|
|
|
<span className="font">共检索到<em>{resultData.total_records}</em>条结果</span> |
|
|
|
<ResultFlowResult ajaxLoad={ajaxLoading} resultData={resultData.data ? resultData.data : []}> |
|
|
|
<Table |
|
|
|
bordered |
|
|
|
// className='yisa-table' |
|
|
|
dataSource={resultData.data} |
|
|
|
columns={ |
|
|
|
handleColumns() |
|
|
|
<div className="paid-result"> |
|
|
|
<div className="result"> |
|
|
|
|
|
|
|
<ResultFlowResult ajaxLoad={ajaxLoading} resultData={resultData.data ? resultData.data : []}> |
|
|
|
{formData.tab === '1' ? |
|
|
|
<> |
|
|
|
<span className="font">共检索到<em>{resultData.total_records}</em>条结果</span> |
|
|
|
<Table |
|
|
|
bordered |
|
|
|
// className='yisa-table' |
|
|
|
dataSource={resultData.data} |
|
|
|
columns={ |
|
|
|
handleColumns() |
|
|
|
} |
|
|
|
// rowKey={record => record.cap_id + "_" + record.bk_id} |
|
|
|
pagination={false} |
|
|
|
loading={ajaxLoading} |
|
|
|
/> |
|
|
|
<Pagination |
|
|
|
className="pagination-common" |
|
|
|
showSizeChanger |
|
|
|
showQuickJumper |
|
|
|
showTotal={() => `共 ${resultData.total_records} 条`} |
|
|
|
total={resultData.total_records} |
|
|
|
current={lastFormData.pn} |
|
|
|
pageSize={lastFormData.page_size} |
|
|
|
pageSizeOptions={pageSizeOptions} |
|
|
|
onChange={changePn} |
|
|
|
onShowSizeChange={changeLength} |
|
|
|
/> |
|
|
|
</> : '' |
|
|
|
|
|
|
|
} |
|
|
|
{formData.tab === '2' ? |
|
|
|
<> |
|
|
|
<span className="font">共检索到<em>{resultData.total_records}</em>条结果</span> |
|
|
|
<Table |
|
|
|
bordered |
|
|
|
// className='yisa-table' |
|
|
|
dataSource={resultData.data} |
|
|
|
columns={ |
|
|
|
handleApplyColumns() |
|
|
|
} |
|
|
|
// rowKey={record => record.cap_id + "_" + record.bk_id} |
|
|
|
pagination={false} |
|
|
|
loading={ajaxLoading} |
|
|
|
/> |
|
|
|
<Pagination |
|
|
|
className="pagination-common" |
|
|
|
showSizeChanger |
|
|
|
showQuickJumper |
|
|
|
showTotal={() => `共 ${resultData.total_records} 条`} |
|
|
|
total={resultData.total_records} |
|
|
|
current={parkFormData.pn} |
|
|
|
pageSize={parkFormData.page_size} |
|
|
|
pageSizeOptions={pageSizeOptions} |
|
|
|
onChange={changeParkPn} |
|
|
|
onShowSizeChange={changeParkLength} |
|
|
|
/> |
|
|
|
</> : '' |
|
|
|
|
|
|
|
} |
|
|
|
// rowKey={record => record.cap_id + "_" + record.bk_id} |
|
|
|
pagination={false} |
|
|
|
loading={ajaxLoading} |
|
|
|
/> |
|
|
|
<Pagination |
|
|
|
className="pagination-common" |
|
|
|
showSizeChanger |
|
|
|
showQuickJumper |
|
|
|
showTotal={() => `共 ${resultData.total_records} 条`} |
|
|
|
total={resultData.total_records} |
|
|
|
current={lastFormData.pn} |
|
|
|
pageSize={lastFormData.page_size} |
|
|
|
pageSizeOptions={pageSizeOptions} |
|
|
|
onChange={changePn} |
|
|
|
onShowSizeChange={changeLength} |
|
|
|
/> |
|
|
|
</ResultFlowResult> |
|
|
|
</ResultFlowResult> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
</div> |
|
|
|
<Modal |
|
|
|
visible={addVisible} |
|
|
|
@ -457,7 +733,7 @@ function FreeRule(props) { |
|
|
|
className="freeModal" |
|
|
|
> |
|
|
|
<div className="yisa-search"> |
|
|
|
<div className="redLogo">*</div> |
|
|
|
<div className="redLogo">*</div> |
|
|
|
<label>所属商户</label> |
|
|
|
<Select |
|
|
|
style={{ width: 256, marginLeft: 20 }} |
|
|
|
@ -471,7 +747,7 @@ function FreeRule(props) { |
|
|
|
/> |
|
|
|
</div> |
|
|
|
<div className="yisa-search"> |
|
|
|
<div className="redLogo">*</div> |
|
|
|
<div className="redLogo">*</div> |
|
|
|
<label>免费类型</label> |
|
|
|
<Input |
|
|
|
style={{ width: 200, marginLeft: 20 }} |
|
|
|
|
