Liujinxu
2 years ago
30 changed files with 3448 additions and 486 deletions
-
142src/components/TableModule/index.jsx
-
12src/components/TableModule/index.scss
-
93src/pages/OutRoadMgm/OutBusinessRecord/OutParkingRecordInquiry/Detail/RecordList.jsx
-
75src/pages/OutRoadMgm/OutBusinessRecord/OutParkingRecordInquiry/Detail/RefundList.jsx
-
75src/pages/OutRoadMgm/OutBusinessRecord/OutParkingRecordInquiry/Detail/StopList.jsx
-
48src/pages/OutRoadMgm/OutBusinessRecord/OutParkingRecordInquiry/Detail/index.jsx
-
73src/pages/OutRoadMgm/OutBusinessRecord/OutParkingRecordInquiry/Detail/index.scss
-
185src/pages/OutRoadMgm/OutBusinessRecord/OutParkingRecordInquiry/loadable.jsx
-
107src/pages/OutRoadMgm/OutSegmentMgm/ChargeRulesMgm/loadable.jsx
-
249src/pages/OutRoadMgm/OutSegmentMgm/OutSegment/ConfigParking/BusinessParameterConfig.jsx
-
17src/pages/OutRoadMgm/OutSegmentMgm/OutSegment/ConfigParking/BusinessParameterConfig.scss
-
345src/pages/OutRoadMgm/OutSegmentMgm/OutSegment/ConfigParking/CarMgm/BlacklistManagement.jsx
-
233src/pages/OutRoadMgm/OutSegmentMgm/OutSegment/ConfigParking/CarMgm/CarGroupMgm.jsx
-
332src/pages/OutRoadMgm/OutSegmentMgm/OutSegment/ConfigParking/CarMgm/CarManagement.jsx
-
348src/pages/OutRoadMgm/OutSegmentMgm/OutSegment/ConfigParking/CarMgm/WhitelistManagement.jsx
-
193src/pages/OutRoadMgm/OutSegmentMgm/OutSegment/ConfigParking/LEDConfiguration.jsx
-
205src/pages/OutRoadMgm/OutSegmentMgm/OutSegment/ConfigParking/MSPages.jsx
-
17src/pages/OutRoadMgm/OutSegmentMgm/OutSegment/ConfigParking/index.jsx
-
267src/pages/OutRoadMgm/OutSegmentMgm/OutSegment/Detail.jsx
-
5src/pages/OutRoadMgm/OutSegmentMgm/OutSegment/loadable.jsx
-
93src/pages/OutRoadMgm/OutSegmentMgm/ZombieCarMgm/Detail/RecordList.jsx
-
75src/pages/OutRoadMgm/OutSegmentMgm/ZombieCarMgm/Detail/RefundList.jsx
-
75src/pages/OutRoadMgm/OutSegmentMgm/ZombieCarMgm/Detail/StopList.jsx
-
48src/pages/OutRoadMgm/OutSegmentMgm/ZombieCarMgm/Detail/index.jsx
-
73src/pages/OutRoadMgm/OutSegmentMgm/ZombieCarMgm/Detail/index.scss
-
208src/pages/OutRoadMgm/OutSegmentMgm/ZombieCarMgm/loadable.jsx
-
11src/services/OutRoadMgm/OutParkingRecordInquiry.js
-
268src/services/OutRoadMgm/OutSegment.js
-
57src/services/OutRoadMgm/ZombieCarMgm.js
-
5src/services/OutRoadMgm/index.js
@ -0,0 +1,93 @@ |
|||
import React, { useEffect, useState } from "react"; |
|||
import { Table } from "antd"; |
|||
import ajax from "@/services"; |
|||
function RecordList({ id }) { |
|||
const columns = [ |
|||
{ |
|||
title: "序号", |
|||
dataIndex: "id", |
|||
key: "id", |
|||
render: (text, record, index) => index + 1, |
|||
}, |
|||
{ |
|||
title: "订单ID", |
|||
dataIndex: "order_id", |
|||
key: "order_id", |
|||
}, |
|||
{ |
|||
title: "入场时间", |
|||
dataIndex: "in_time", |
|||
key: "in_time", |
|||
}, |
|||
{ |
|||
title: "出场时间", |
|||
dataIndex: "out_time", |
|||
key: "out_time", |
|||
}, |
|||
{ |
|||
title: "应收金额", |
|||
dataIndex: "ys_money", |
|||
key: "ys_money", |
|||
}, |
|||
{ |
|||
title: "优惠金额", |
|||
dataIndex: "yh_money", |
|||
key: "yh_money", |
|||
}, |
|||
{ |
|||
title: "实收金额", |
|||
dataIndex: "sf_money", |
|||
key: "sf_money", |
|||
}, |
|||
{ |
|||
title: "支付类型", |
|||
dataIndex: "pay_type_name", |
|||
key: "pay_type_name", |
|||
}, |
|||
{ |
|||
title: "支付渠道", |
|||
dataIndex: "payment_type_name", |
|||
key: "payment_type_name", |
|||
}, |
|||
{ |
|||
title: "支付设备", |
|||
dataIndex: "payment_device_name", |
|||
key: "payment_device_name", |
|||
}, |
|||
{ |
|||
title: "支付人", |
|||
dataIndex: "car_owner_name", |
|||
key: "car_owner_name", |
|||
}, |
|||
{ |
|||
title: "付款车场", |
|||
dataIndex: "park_name", |
|||
key: "park_name", |
|||
}, |
|||
{ |
|||
title: "第三方流水ID", |
|||
dataIndex: "third_party_flow_id", |
|||
key: "third_party_flow_id", |
|||
}, |
|||
]; |
|||
const [dataSource, setDataSource] = useState([]); |
|||
function getList() { |
|||
ajax.showPayList({ id }).then((res) => { |
|||
if (res.status === 20000) { |
|||
setDataSource(res.data.list); |
|||
} |
|||
}); |
|||
} |
|||
useEffect(() => { |
|||
getList(); |
|||
}, []); |
|||
return ( |
|||
<Table |
|||
dataSource={dataSource} |
|||
columns={columns} |
|||
className="yisa-table" |
|||
></Table> |
|||
); |
|||
} |
|||
|
|||
export default RecordList; |
|||
@ -0,0 +1,75 @@ |
|||
import React, { useEffect, useState } from "react"; |
|||
import { Table } from "antd"; |
|||
import ajax from "@/services"; |
|||
function RefundList({ id }) { |
|||
const columns = [ |
|||
{ |
|||
title: "序号", |
|||
dataIndex: "id", |
|||
key: "id", |
|||
render: (text, record, index) => index + 1, |
|||
}, |
|||
{ |
|||
title: "退款方式", |
|||
dataIndex: "refund_type", |
|||
key: "refund_type", |
|||
}, |
|||
{ |
|||
title: "支付渠道", |
|||
dataIndex: "payment_type_name", |
|||
key: "payment_type_name", |
|||
}, |
|||
|
|||
{ |
|||
title: "支付设备", |
|||
dataIndex: "payment_device_name", |
|||
key: "payment_device_name", |
|||
}, |
|||
{ |
|||
title: "退款原因", |
|||
dataIndex: "reason", |
|||
key: "reason", |
|||
}, |
|||
{ |
|||
title: "退款金额", |
|||
dataIndex: "refund_amount", |
|||
key: "refund_amount", |
|||
}, |
|||
{ |
|||
title: "申请人", |
|||
dataIndex: "application_person", |
|||
key: "application_person", |
|||
}, |
|||
|
|||
{ |
|||
title: "申请时间", |
|||
dataIndex: "application_time", |
|||
key: "application_time", |
|||
}, |
|||
{ |
|||
title: "退款时间", |
|||
dataIndex: "refund_time", |
|||
key: "refund_time", |
|||
}, |
|||
]; |
|||
const [dataSource, setDataSource] = useState([]); |
|||
function getList() { |
|||
ajax.showRefoundList({ id }).then((res) => { |
|||
if (res.status === 20000) { |
|||
setDataSource(res.data.list); |
|||
} |
|||
}); |
|||
} |
|||
useEffect(() => { |
|||
getList(); |
|||
}, []); |
|||
return ( |
|||
<Table |
|||
dataSource={dataSource} |
|||
columns={columns} |
|||
className="yisa-table" |
|||
></Table> |
|||
); |
|||
} |
|||
|
|||
export default RefundList; |
|||
@ -0,0 +1,75 @@ |
|||
import React, { useState, useEffect } from "react"; |
|||
import ajax from "@/services"; |
|||
import { message, Descriptions, Image } from "antd"; |
|||
function StopList({ id }) { |
|||
//获取停车记录 |
|||
const [recordData, setRecordData] = useState({}); |
|||
|
|||
function getRecord() { |
|||
ajax.showStopList({ id }).then((res) => { |
|||
if (res.status === 20000) { |
|||
setRecordData(res.data.list[0]); |
|||
} else { |
|||
message.error(res.message); |
|||
} |
|||
}); |
|||
} |
|||
|
|||
useEffect(() => { |
|||
getRecord(); |
|||
}, []); |
|||
return ( |
|||
<div> |
|||
<Descriptions title="停车场信息"> |
|||
<Descriptions.Item label="停车场名称"> |
|||
{recordData.park_name} |
|||
</Descriptions.Item> |
|||
<Descriptions.Item label="区域"> |
|||
{recordData.area_name} |
|||
</Descriptions.Item> |
|||
<Descriptions.Item label="商户"> |
|||
{recordData.shop_name} |
|||
</Descriptions.Item> |
|||
<Descriptions.Item label="车场类型"> |
|||
{recordData.road_type_name} |
|||
</Descriptions.Item> |
|||
</Descriptions> |
|||
<Descriptions title="停车信息"> |
|||
<Descriptions.Item label="车牌号"> |
|||
{recordData.plate_num} |
|||
</Descriptions.Item> |
|||
<Descriptions.Item label="会员手机号"> |
|||
{recordData.phone} |
|||
</Descriptions.Item> |
|||
<Descriptions.Item label="入场时间"> |
|||
{recordData.in_time} |
|||
</Descriptions.Item> |
|||
<Descriptions.Item label="出场时间"> |
|||
{recordData.out_time} |
|||
</Descriptions.Item> |
|||
<Descriptions.Item label="停车时长"> |
|||
{recordData.parking_time} |
|||
</Descriptions.Item> |
|||
<Descriptions.Item label="应收金额"> |
|||
{recordData.ys_money} |
|||
</Descriptions.Item> |
|||
<Descriptions.Item label="优惠金额"> |
|||
{recordData.yh_money} |
|||
</Descriptions.Item> |
|||
<Descriptions.Item label="实付金额"> |
|||
{recordData.sf_money} |
|||
</Descriptions.Item> |
|||
</Descriptions> |
|||
<Descriptions title="入场照片"> |
|||
<Descriptions.Item label="入场车辆照片"> |
|||
<Image src={recordData.in_veh_pic} /> |
|||
</Descriptions.Item> |
|||
<Descriptions.Item label="入场车牌照片"> |
|||
<Image src={recordData.in_plate_pic} /> |
|||
</Descriptions.Item> |
|||
</Descriptions> |
|||
</div> |
|||
); |
|||
} |
|||
|
|||
export default StopList; |
|||
@ -0,0 +1,48 @@ |
|||
import React, { useEffect, useState } from "react"; |
|||
import { Modal, message, Tabs } from "antd"; |
|||
import ajax from "@/services"; |
|||
import StopList from "./StopList"; |
|||
import RecordList from "./RecordList"; |
|||
import RefundList from "./RefundList"; |
|||
import "./index.scss"; |
|||
function Detail(props) { |
|||
const { visible = false, close = () => {}, onOk = () => {}, id } = props; |
|||
//tabs数据 |
|||
const tabsItems = [ |
|||
{ |
|||
label: "停车记录", |
|||
key: "1", |
|||
children: <StopList id={id} />, |
|||
}, |
|||
{ |
|||
label: "支付记录", |
|||
key: "2", |
|||
children: <RecordList id={id} />, |
|||
}, |
|||
{ |
|||
label: "退款订单", |
|||
key: "3", |
|||
children: <RefundList id={id} />, |
|||
}, |
|||
]; |
|||
//tabs的key |
|||
const [tabsKey, setTabsKey] = useState("1"); |
|||
function tabsChange(value) { |
|||
setTabsKey(value); |
|||
} |
|||
useEffect(() => {}, []); |
|||
return ( |
|||
<Modal |
|||
open={visible} |
|||
onCancel={close} |
|||
onOk={onOk} |
|||
destroyOnClose |
|||
title="详情" |
|||
width={1200} |
|||
> |
|||
<Tabs items={tabsItems} activeKey={tabsKey} onChange={tabsChange} /> |
|||
</Modal> |
|||
); |
|||
} |
|||
|
|||
export default Detail; |
|||
@ -0,0 +1,73 @@ |
|||
.ant-tabs { |
|||
margin-bottom: 16px; |
|||
|
|||
.ant-tabs-nav { |
|||
margin-bottom: 0 !important; |
|||
|
|||
&::before { |
|||
border-bottom: 1px solid var(--color-card-line) !important; |
|||
} |
|||
} |
|||
|
|||
.ant-tabs-nav-wrap { |
|||
width: 100%; |
|||
box-sizing: content-box; |
|||
|
|||
.ant-tabs-nav-list { |
|||
width: 340px; |
|||
|
|||
.ant-tabs-ink-bar { |
|||
height: 3px; |
|||
background-color: #00ccff; |
|||
} |
|||
|
|||
.ant-tabs-tab { |
|||
flex: 1; |
|||
width: 100%; |
|||
display: flex; |
|||
justify-content: center; |
|||
padding-bottom: 10px; |
|||
text-align: center; |
|||
cursor: pointer; |
|||
font-size: 14px !important; |
|||
font-family: MicrosoftYaHei; |
|||
text-align: center; |
|||
letter-spacing: 0.7px; |
|||
} |
|||
|
|||
.ant-tabs-tab-active { |
|||
div { |
|||
color: #00ccff; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
.yisa-table { |
|||
width: 100%; |
|||
|
|||
.ant-table-thead { |
|||
th { |
|||
background: var(--color-table-header-bg) !important; |
|||
} |
|||
} |
|||
|
|||
.ant-table-tbody { |
|||
td { |
|||
background: var(--color-table-body-bg) !important; |
|||
border-bottom-color: var(--color-table-border-bottom-color); |
|||
} |
|||
|
|||
tr:nth-child(even) { |
|||
td { |
|||
background: var(--color-table-body-bg-nth-child-even) !important; |
|||
} |
|||
} |
|||
|
|||
tr:nth-child(odd) { |
|||
td { |
|||
background: var(--color-table-body-bg-nth-child-even) !important; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
@ -1,15 +1,184 @@ |
|||
import React, { useState, useRef, useEffect } from "react"; |
|||
// import { message, Pagination, Table, Space, Modal, } from "antd"; |
|||
import { message, Pagination, Table, Space, Modal, Button } 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 ajax from "@/services"; |
|||
import { TableModule } from "@/components"; |
|||
import "./index.scss"; |
|||
import Detail from "./Detail"; |
|||
function OutParkingRecordInquiry() { |
|||
return <div>OutParkingRecordInquiry</div> |
|||
const columns = [ |
|||
{ |
|||
title: "序号", |
|||
dataIndex: "id", |
|||
key: "id", |
|||
}, |
|||
{ |
|||
title: "区域", |
|||
dataIndex: "area", |
|||
key: "area", |
|||
}, |
|||
{ |
|||
title: "商户名称", |
|||
dataIndex: "merchantName", |
|||
key: "merchantName", |
|||
}, |
|||
{ |
|||
title: "停车场名称", |
|||
dataIndex: "parkingLotName", |
|||
key: "parkingLotName", |
|||
}, |
|||
{ |
|||
title: "车场类型", |
|||
dataIndex: "parkingLotType", |
|||
key: "parkingLotType", |
|||
}, |
|||
{ |
|||
title: "车牌号", |
|||
dataIndex: "licensePlate", |
|||
key: "licensePlate", |
|||
}, |
|||
{ |
|||
title: "泊位号", |
|||
dataIndex: "berthNumber", |
|||
key: "berthNumber", |
|||
}, |
|||
{ |
|||
title: "入场时间", |
|||
dataIndex: "entryTime", |
|||
key: "entryTime", |
|||
}, |
|||
{ |
|||
title: "离场时间", |
|||
dataIndex: "exitTime", |
|||
key: "exitTime", |
|||
}, |
|||
{ |
|||
title: "停车时长", |
|||
dataIndex: "parkingDuration", |
|||
key: "parkingDuration", |
|||
}, |
|||
{ |
|||
title: "应收金额", |
|||
dataIndex: "receivableAmount", |
|||
key: "receivableAmount", |
|||
}, |
|||
{ |
|||
title: "实收金额", |
|||
dataIndex: "actualAmount", |
|||
key: "actualAmount", |
|||
}, |
|||
{ |
|||
title: "操作", |
|||
dataIndex: "operation", |
|||
key: "operation", |
|||
render: (_, record) => ( |
|||
<Button |
|||
onClick={() => { |
|||
setDetailModal({ |
|||
...detailModal, |
|||
visible: true, |
|||
id: record.id, |
|||
}); |
|||
}} |
|||
> |
|||
操作 |
|||
</Button> |
|||
), |
|||
}, |
|||
]; |
|||
const formSearch = [ |
|||
{ |
|||
name: "region", |
|||
type: "TreeSelect", |
|||
label: "区域", |
|||
}, |
|||
{ |
|||
name: "operator", |
|||
type: "Select", |
|||
label: "商户名称", |
|||
placeholder: "请选择商户名称", |
|||
}, |
|||
{ |
|||
name: "parking_lot", |
|||
type: "Input", |
|||
label: "停车场名称", |
|||
placeholder: "请选择停车场名称", |
|||
}, |
|||
{ |
|||
name: "plate", |
|||
type: "Input", |
|||
label: "车牌号", |
|||
placeholder: "请输入车牌号", |
|||
}, |
|||
{ |
|||
name: "type", |
|||
type: "Select", |
|||
label: "出入场类型", |
|||
options: [ |
|||
{ |
|||
label: "出场", |
|||
value: 1, |
|||
}, |
|||
{ |
|||
label: "入场", |
|||
value: 2, |
|||
}, |
|||
], |
|||
defaultValue: 2, |
|||
}, |
|||
{ |
|||
name: "time", |
|||
type: "RangePicker", |
|||
label: "时间段", |
|||
}, |
|||
]; |
|||
//搜索参数初始化 |
|||
const initFormData = {}; |
|||
|
|||
//搜索的结果 |
|||
const [tableData, setTableData] = useState([]); |
|||
//搜索的总结果数 |
|||
const [total, setTotal] = useState(0); |
|||
const [detailModal, setDetailModal] = useState({ |
|||
id: "", |
|||
visible: false, |
|||
close: () => setDetailModal({ ...detailModal, visible: false }), |
|||
onOk: () => { |
|||
detailModal.close(); |
|||
}, |
|||
}); |
|||
|
|||
function fetch(params) { |
|||
ajax.getRecordList(params).then((res) => { |
|||
if (res.status === 20000) { |
|||
setTableData(res.data.list); |
|||
setTotal(res.data.total); |
|||
} |
|||
}); |
|||
} |
|||
|
|||
return ( |
|||
<> |
|||
<TableModule |
|||
columns={columns} |
|||
tableData={tableData} |
|||
formSearch={formSearch} |
|||
total={total} |
|||
pagename="" |
|||
search={fetch} |
|||
initFormData={initFormData} |
|||
exportUrl="" |
|||
/> |
|||
<Detail |
|||
visible={detailModal.visible} |
|||
close={detailModal.close} |
|||
onOk={detailModal.onOk} |
|||
id={detailModal.id} |
|||
/> |
|||
</> |
|||
); |
|||
} |
|||
|
|||
export default OutParkingRecordInquiry; |
|||
export default OutParkingRecordInquiry; |
|||
@ -1,15 +1,106 @@ |
|||
import React, { useState, useRef, useEffect } from "react"; |
|||
// import { message, Pagination, Table, Space, Modal, } from "antd"; |
|||
import { message, Pagination, Table, Space, Modal, Button } 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 ajax from "@/services"; |
|||
import { TableModule } from "@/components"; |
|||
import "./index.scss"; |
|||
function ChargeRulesMgm() { |
|||
return <div>ChargeRulesMgm</div> |
|||
const columns = [ |
|||
{ |
|||
title: "商户名称", |
|||
dataIndex: "merchantName", |
|||
key: "merchantName", |
|||
}, |
|||
{ |
|||
title: "规则名称", |
|||
dataIndex: "ruleName", |
|||
key: "ruleName", |
|||
}, |
|||
{ |
|||
title: "规则编码", |
|||
dataIndex: "ruleCode", |
|||
key: "ruleCode", |
|||
}, |
|||
{ |
|||
title: "创建人", |
|||
dataIndex: "creator", |
|||
key: "creator", |
|||
}, |
|||
{ |
|||
title: "更新时间", |
|||
dataIndex: "updateTime", |
|||
key: "updateTime", |
|||
}, |
|||
{ |
|||
title: "描述", |
|||
dataIndex: "description", |
|||
key: "description", |
|||
}, |
|||
{ |
|||
title: "操作", |
|||
dataIndex: "operation", |
|||
key: "operation", |
|||
render: () => <a>Edit</a>, |
|||
}, |
|||
]; |
|||
const formSearch = [ |
|||
{ |
|||
name: "rule_name", |
|||
type: "Input", |
|||
label: "规则名称", |
|||
placeholder: "请输入规则名称", |
|||
}, |
|||
{ |
|||
name: "rule_code", |
|||
type: "Input", |
|||
label: "规则编码", |
|||
placeholder: "请输入规则编码", |
|||
}, |
|||
{ |
|||
name: "operator", |
|||
type: "Select", |
|||
label: "商户名称", |
|||
placeholder: "请选择商户名称", |
|||
}, |
|||
]; |
|||
//搜索参数初始化 |
|||
const initFormData = { |
|||
region: null, |
|||
type: 2, |
|||
operator: null, |
|||
road: "", |
|||
road_type: 0, |
|||
plate: "", |
|||
}; |
|||
|
|||
//搜索的结果 |
|||
const [tableData, setTableData] = useState([]); |
|||
//搜索的总结果数 |
|||
const [total, setTotal] = useState(0); |
|||
|
|||
function fetch(params) { |
|||
ajax.getParkingArrearsList(params).then((res) => { |
|||
if (res.status === 20000) { |
|||
setTableData(res.data.list); |
|||
setTotal(res.data.total); |
|||
} |
|||
}); |
|||
} |
|||
|
|||
return ( |
|||
<TableModule |
|||
columns={columns} |
|||
tableData={tableData} |
|||
formSearch={formSearch} |
|||
total={total} |
|||
pagename="停车欠费订单" |
|||
search={fetch} |
|||
initFormData={initFormData} |
|||
exportUrl="/api/bpm/record/get_parking_arrears_export" |
|||
/> |
|||
); |
|||
} |
|||
|
|||
export default ChargeRulesMgm; |
|||
export default ChargeRulesMgm; |
|||
@ -1,106 +1,147 @@ |
|||
import React from 'react' |
|||
import { Button, Form, Radio, Input, Select, Row, Col } from 'antd' |
|||
import './BusinessParameterConfig.scss' |
|||
function BusinessParameterConfig() { |
|||
return ( |
|||
<div style={{ width: "60%" }}> |
|||
<header style={{ margin: "10px 0" }}> |
|||
<h3>出入场配置</h3> |
|||
</header> |
|||
<main> |
|||
<Form> |
|||
<Row gutter={[30]}> |
|||
<Col span={12}> |
|||
<Form.Item label="无牌车是否允许入场"> |
|||
<Radio.Group options={[ |
|||
{ |
|||
label: "是", |
|||
value: 1 |
|||
}, |
|||
{ |
|||
label: "否", |
|||
value: 0 |
|||
} |
|||
]} /> |
|||
</Form.Item> |
|||
</Col> |
|||
<Col span={12}> |
|||
<Form.Item label="支持相似车牌出入场匹配"> |
|||
<Radio.Group options={[ |
|||
{ |
|||
label: "是", |
|||
value: 1 |
|||
}, |
|||
{ |
|||
label: "否", |
|||
value: 0 |
|||
} |
|||
]} /> |
|||
</Form.Item> |
|||
</Col> |
|||
<Col span={12}> |
|||
<Form.Item label="车位满时是否允许月租车入场"> |
|||
<Radio.Group options={[ |
|||
{ |
|||
label: "是", |
|||
value: 1 |
|||
}, |
|||
{ |
|||
label: "否", |
|||
value: 0 |
|||
} |
|||
]} /></Form.Item> |
|||
</Col> |
|||
<Col span={12}> |
|||
<Form.Item label="军警车是否计费"> |
|||
<Radio.Group options={[ |
|||
{ |
|||
label: "是", |
|||
value: 1 |
|||
}, |
|||
{ |
|||
label: "否", |
|||
value: 0 |
|||
} |
|||
]} /></Form.Item> |
|||
</Col> |
|||
<Col span={12}> |
|||
<Form.Item label="场内缴费后免费离场时间"> |
|||
<Input></Input> |
|||
</Form.Item> |
|||
</Col> |
|||
<Col span={12}> |
|||
<Form.Item label="断网时是否允许车辆欠费离场"> |
|||
<Radio.Group options={[ |
|||
{ |
|||
label: "是", |
|||
value: 1 |
|||
}, |
|||
{ |
|||
label: "否", |
|||
value: 0 |
|||
} |
|||
]} /> |
|||
</Form.Item> |
|||
</Col> |
|||
<Col span={12}> |
|||
<Form.Item label="记录缺失收费区域偏向"> |
|||
<Select /> |
|||
</Form.Item> |
|||
</Col> |
|||
<Col span={24}> |
|||
<Form.Item> |
|||
<div className='bottom-button'> |
|||
<Button type="primary">同步失败</Button> |
|||
<Button type="primary" htmlType='submit'>保存并同步</Button> |
|||
</div> |
|||
</Form.Item> |
|||
</Col> |
|||
</Row> |
|||
</Form> |
|||
</main> |
|||
</div> |
|||
) |
|||
import React, { useEffect, useState } from "react"; |
|||
import { Button, Form, Radio, Input, Select, Row, Col, message } from "antd"; |
|||
import ajax from "@/services"; |
|||
import "./BusinessParameterConfig.scss"; |
|||
function BusinessParameterConfig(props) { |
|||
const { id } = props; |
|||
const [form] = Form.useForm(); |
|||
|
|||
const [childList, setChildList] = useState([]); |
|||
|
|||
function submit() { |
|||
console.log(form.getFieldsValue()); |
|||
const params = form.getFieldsValue(); |
|||
params.road_id = id; |
|||
|
|||
ajax.getRoadServiceParameters(params).then((res) => { |
|||
if (res.status === 20000) { |
|||
message.success(res.message); |
|||
} |
|||
}); |
|||
} |
|||
useEffect(() => { |
|||
ajax.getRoadAllChild().then((res) => { |
|||
if (res.status === 20000) { |
|||
setChildList(res.data); |
|||
} |
|||
}); |
|||
}, []); |
|||
return ( |
|||
<div style={{ width: "100%" }} className="Bussiness"> |
|||
<header style={{ margin: "10px 0" }}> |
|||
<h3>出入场配置</h3> |
|||
</header> |
|||
<main> |
|||
<Form form={form} labelCol={{ span: 9 }} onFinish={submit}> |
|||
<Row gutter={[30]}> |
|||
<Col span={12}> |
|||
<Form.Item label="无牌车是否允许入场" name="unlicensed_vehicle"> |
|||
<Radio.Group |
|||
options={[ |
|||
{ |
|||
label: "是", |
|||
value: 1, |
|||
}, |
|||
{ |
|||
label: "否", |
|||
value: 0, |
|||
}, |
|||
]} |
|||
/> |
|||
</Form.Item> |
|||
</Col> |
|||
<Col span={12}> |
|||
<Form.Item label="支持相似车牌出入场匹配" name="similar_plates"> |
|||
<Radio.Group |
|||
options={[ |
|||
{ |
|||
label: "是", |
|||
value: 1, |
|||
}, |
|||
{ |
|||
label: "否", |
|||
value: 0, |
|||
}, |
|||
]} |
|||
/> |
|||
</Form.Item> |
|||
</Col> |
|||
<Col span={12}> |
|||
<Form.Item |
|||
label="车位满时是否允许月租车入场" |
|||
name="monthly_rental_car" |
|||
> |
|||
<Radio.Group |
|||
options={[ |
|||
{ |
|||
label: "是", |
|||
value: 1, |
|||
}, |
|||
{ |
|||
label: "否", |
|||
value: 0, |
|||
}, |
|||
]} |
|||
/> |
|||
</Form.Item> |
|||
</Col> |
|||
<Col span={12}> |
|||
<Form.Item label="军警车是否计费" name="military_police_vehicles"> |
|||
<Radio.Group |
|||
options={[ |
|||
{ |
|||
label: "是", |
|||
value: 1, |
|||
}, |
|||
{ |
|||
label: "否", |
|||
value: 0, |
|||
}, |
|||
]} |
|||
/> |
|||
</Form.Item> |
|||
</Col> |
|||
<Col span={12}> |
|||
<Form.Item label="场内缴费后免费离场时间" name="free_time"> |
|||
<Input></Input> |
|||
</Form.Item> |
|||
</Col> |
|||
<Col span={12}> |
|||
<Form.Item label="断网时是否允许车辆欠费离场" name="arrearage"> |
|||
<Radio.Group |
|||
options={[ |
|||
{ |
|||
label: "是", |
|||
value: 1, |
|||
}, |
|||
{ |
|||
label: "否", |
|||
value: 0, |
|||
}, |
|||
]} |
|||
/> |
|||
</Form.Item> |
|||
</Col> |
|||
<Col span={12}> |
|||
<Form.Item label="记录缺失收费区域偏向" name="road_bias"> |
|||
<Select options={childList} /> |
|||
</Form.Item> |
|||
</Col> |
|||
<Col span={24}> |
|||
<Form.Item> |
|||
<div className="bottom-button"> |
|||
<Button type="primary">同步失败</Button> |
|||
<Button type="primary" htmlType="submit"> |
|||
保存并同步 |
|||
</Button> |
|||
</div> |
|||
</Form.Item> |
|||
</Col> |
|||
</Row> |
|||
</Form> |
|||
</main> |
|||
</div> |
|||
); |
|||
} |
|||
|
|||
export default BusinessParameterConfig |
|||
export default BusinessParameterConfig; |
|||
@ -1,6 +1,15 @@ |
|||
.bottom-button{ |
|||
.bottom-button { |
|||
display: flex; |
|||
button{ |
|||
margin:0 10px; |
|||
button { |
|||
margin: 0 10px; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.Bussiness { |
|||
.ant-modal-body input { |
|||
width: 183px; |
|||
} |
|||
.ant-select.ant-select-in-form-item { |
|||
width: 183px; |
|||
} |
|||
} |
|||
@ -1,65 +1,148 @@ |
|||
import React, { useState } from 'react' |
|||
import { Button, Table, Modal, Form, Input } from 'antd' |
|||
function MSPages() { |
|||
const columns = [ |
|||
{ |
|||
title: "MS通信账号", |
|||
dataIndex: "MS_user", |
|||
key: "MS_user", |
|||
align: "center", |
|||
}, |
|||
{ |
|||
title: "创建时间", |
|||
dataIndex: "time", |
|||
key: "time", |
|||
align: "center", |
|||
}, |
|||
{ |
|||
title: "操作", |
|||
dataIndex: "operat", |
|||
key: "operat", |
|||
align: "center", |
|||
render: () => { |
|||
return <Button type="primary" onClick={() => setEditModal(true)}>编辑</Button> |
|||
import React, { useEffect, useState } from "react"; |
|||
import { Button, Table, Modal, Form, Input, message } from "antd"; |
|||
import ajax from "@/services"; |
|||
function MSPages(props) { |
|||
const { itemData = {} } = props; |
|||
const columns = [ |
|||
{ |
|||
title: "MS通信账号", |
|||
dataIndex: "account", |
|||
key: "account", |
|||
align: "center", |
|||
}, |
|||
{ |
|||
title: "创建时间", |
|||
dataIndex: "create_time", |
|||
key: "create_time", |
|||
align: "center", |
|||
}, |
|||
{ |
|||
title: "操作", |
|||
dataIndex: "operat", |
|||
key: "operat", |
|||
align: "center", |
|||
render: (_, record) => { |
|||
return ( |
|||
<Button |
|||
type="primary" |
|||
onClick={() => { |
|||
setEditModal({ |
|||
visible: true, |
|||
record, |
|||
}); |
|||
form.setFieldsValue({ |
|||
account: record.account, |
|||
pwd: record.pwd, |
|||
}); |
|||
}} |
|||
> |
|||
编辑 |
|||
</Button> |
|||
); |
|||
}, |
|||
}, |
|||
]; |
|||
const [form] = Form.useForm(); |
|||
const [dataSource, setDataSource] = useState([]); |
|||
//编辑 |
|||
const [editModal, setEditModal] = useState({ |
|||
visible: false, |
|||
record: {}, |
|||
}); |
|||
//提交编辑接口 |
|||
const commitMS = () => { |
|||
form |
|||
.validateFields() |
|||
.then((res) => { |
|||
console.log(res); |
|||
ajax |
|||
.editRoadMs({ |
|||
...res, |
|||
id: editModal.record.id, |
|||
}) |
|||
.then((res) => { |
|||
if (res.status === 20000) { |
|||
message.success(res.message); |
|||
setEditModal({ |
|||
visible: false, |
|||
record: {}, |
|||
}); |
|||
} |
|||
}, |
|||
] |
|||
const [form] = Form.useForm() |
|||
const [dataSource, setDataSource] = useState([ |
|||
{ |
|||
MS_user: 123, |
|||
time: "2020-01-03", |
|||
}); |
|||
}) |
|||
.catch((err) => { |
|||
console.error(err); |
|||
}); |
|||
}; |
|||
|
|||
} |
|||
]) |
|||
//编辑 |
|||
const [editModal, setEditModal] = useState(false) |
|||
//提交编辑接口 |
|||
const commitMS = () => { |
|||
form.validateFields().then(res => { |
|||
console.log(res); |
|||
}).catch(err => { console.error(err) }) |
|||
} |
|||
return ( |
|||
<div> |
|||
<header style={{ margin: "10px 0" }}> |
|||
<Button type='primary'>添加</Button> |
|||
</header> |
|||
<main> |
|||
<Table className='yisa-table' columns={columns} dataSource={dataSource} /> |
|||
</main> |
|||
<Modal open={editModal} onCancel={() => setEditModal(false)} title="编辑" onOk={commitMS}> |
|||
<Form form={form} labelCol={{ span: 6 }}> |
|||
<Form.Item label="MS账号" name="MS_user" rules={[{ required: true, message: "此为必填字段" }]}> |
|||
<Input /> |
|||
</Form.Item> |
|||
<Form.Item label="密码" name="password" rules={[{ required: true, message: "此为必填字段" }]}> |
|||
<Input /> |
|||
</Form.Item> |
|||
</Form> |
|||
</Modal> |
|||
</div> |
|||
) |
|||
useEffect(() => { |
|||
ajax.getRoadMs().then((res) => { |
|||
if (res.status === 20000) { |
|||
console.log(res.data); |
|||
setDataSource([res.data]); |
|||
} |
|||
}); |
|||
}, []); |
|||
|
|||
return ( |
|||
<div> |
|||
<header style={{ margin: "10px 0" }}> |
|||
<Button |
|||
type="primary" |
|||
disabled={dataSource.length >= 1} |
|||
onClick={() => { |
|||
setEditModal({ |
|||
visible: true, |
|||
record: {}, |
|||
}); |
|||
form.setFieldsValue({ |
|||
account: "", |
|||
pwd: "", |
|||
}); |
|||
}} |
|||
> |
|||
添加 |
|||
</Button> |
|||
</header> |
|||
<main> |
|||
<Table |
|||
className="yisa-table" |
|||
columns={columns} |
|||
dataSource={dataSource} |
|||
/> |
|||
</main> |
|||
<Modal |
|||
open={editModal.visible} |
|||
onCancel={() => setEditModal({ visible: false, record: {} })} |
|||
title="编辑" |
|||
onOk={commitMS} |
|||
> |
|||
<Form |
|||
form={form} |
|||
labelCol={{ span: 6 }} |
|||
initialValues={{ |
|||
account: editModal.record.account, |
|||
pwd: editModal.record.pwd, |
|||
}} |
|||
> |
|||
<Form.Item |
|||
label="MS账号" |
|||
name="account" |
|||
rules={[{ required: true, message: "此为必填字段" }]} |
|||
> |
|||
<Input /> |
|||
</Form.Item> |
|||
<Form.Item |
|||
label="密码" |
|||
name="pwd" |
|||
rules={[{ required: true, message: "此为必填字段" }]} |
|||
> |
|||
<Input /> |
|||
</Form.Item> |
|||
</Form> |
|||
</Modal> |
|||
</div> |
|||
); |
|||
} |
|||
|
|||
export default MSPages |
|||
export default MSPages; |
|||
@ -0,0 +1,93 @@ |
|||
import React, { useEffect, useState } from "react"; |
|||
import { Table } from "antd"; |
|||
import ajax from "@/services"; |
|||
function RecordList({ id }) { |
|||
const columns = [ |
|||
{ |
|||
title: "序号", |
|||
dataIndex: "id", |
|||
key: "id", |
|||
render: (text, record, index) => index + 1, |
|||
}, |
|||
{ |
|||
title: "订单ID", |
|||
dataIndex: "order_id", |
|||
key: "order_id", |
|||
}, |
|||
{ |
|||
title: "入场时间", |
|||
dataIndex: "in_time", |
|||
key: "in_time", |
|||
}, |
|||
{ |
|||
title: "出场时间", |
|||
dataIndex: "out_time", |
|||
key: "out_time", |
|||
}, |
|||
{ |
|||
title: "应收金额", |
|||
dataIndex: "ys_money", |
|||
key: "ys_money", |
|||
}, |
|||
{ |
|||
title: "优惠金额", |
|||
dataIndex: "yh_money", |
|||
key: "yh_money", |
|||
}, |
|||
{ |
|||
title: "实收金额", |
|||
dataIndex: "sf_money", |
|||
key: "sf_money", |
|||
}, |
|||
{ |
|||
title: "支付类型", |
|||
dataIndex: "pay_type_name", |
|||
key: "pay_type_name", |
|||
}, |
|||
{ |
|||
title: "支付渠道", |
|||
dataIndex: "payment_type_name", |
|||
key: "payment_type_name", |
|||
}, |
|||
{ |
|||
title: "支付设备", |
|||
dataIndex: "payment_device_name", |
|||
key: "payment_device_name", |
|||
}, |
|||
{ |
|||
title: "支付人", |
|||
dataIndex: "car_owner_name", |
|||
key: "car_owner_name", |
|||
}, |
|||
{ |
|||
title: "付款车场", |
|||
dataIndex: "park_name", |
|||
key: "park_name", |
|||
}, |
|||
{ |
|||
title: "第三方流水ID", |
|||
dataIndex: "third_party_flow_id", |
|||
key: "third_party_flow_id", |
|||
}, |
|||
]; |
|||
const [dataSource, setDataSource] = useState([]); |
|||
function getList() { |
|||
ajax.showPayList({ id }).then((res) => { |
|||
if (res.status === 20000) { |
|||
setDataSource(res.data.list); |
|||
} |
|||
}); |
|||
} |
|||
useEffect(() => { |
|||
getList(); |
|||
}, []); |
|||
return ( |
|||
<Table |
|||
dataSource={dataSource} |
|||
columns={columns} |
|||
className="yisa-table" |
|||
></Table> |
|||
); |
|||
} |
|||
|
|||
export default RecordList; |
|||
@ -0,0 +1,75 @@ |
|||
import React, { useEffect, useState } from "react"; |
|||
import { Table } from "antd"; |
|||
import ajax from "@/services"; |
|||
function RefundList({ id }) { |
|||
const columns = [ |
|||
{ |
|||
title: "序号", |
|||
dataIndex: "id", |
|||
key: "id", |
|||
render: (text, record, index) => index + 1, |
|||
}, |
|||
{ |
|||
title: "退款方式", |
|||
dataIndex: "refund_type", |
|||
key: "refund_type", |
|||
}, |
|||
{ |
|||
title: "支付渠道", |
|||
dataIndex: "payment_type_name", |
|||
key: "payment_type_name", |
|||
}, |
|||
|
|||
{ |
|||
title: "支付设备", |
|||
dataIndex: "payment_device_name", |
|||
key: "payment_device_name", |
|||
}, |
|||
{ |
|||
title: "退款原因", |
|||
dataIndex: "reason", |
|||
key: "reason", |
|||
}, |
|||
{ |
|||
title: "退款金额", |
|||
dataIndex: "refund_amount", |
|||
key: "refund_amount", |
|||
}, |
|||
{ |
|||
title: "申请人", |
|||
dataIndex: "application_person", |
|||
key: "application_person", |
|||
}, |
|||
|
|||
{ |
|||
title: "申请时间", |
|||
dataIndex: "application_time", |
|||
key: "application_time", |
|||
}, |
|||
{ |
|||
title: "退款时间", |
|||
dataIndex: "refund_time", |
|||
key: "refund_time", |
|||
}, |
|||
]; |
|||
const [dataSource, setDataSource] = useState([]); |
|||
function getList() { |
|||
ajax.showRefoundList({ id }).then((res) => { |
|||
if (res.status === 20000) { |
|||
setDataSource(res.data.list); |
|||
} |
|||
}); |
|||
} |
|||
useEffect(() => { |
|||
getList(); |
|||
}, []); |
|||
return ( |
|||
<Table |
|||
dataSource={dataSource} |
|||
columns={columns} |
|||
className="yisa-table" |
|||
></Table> |
|||
); |
|||
} |
|||
|
|||
export default RefundList; |
|||
@ -0,0 +1,75 @@ |
|||
import React, { useState, useEffect } from "react"; |
|||
import ajax from "@/services"; |
|||
import { message, Descriptions, Image } from "antd"; |
|||
function StopList({ id }) { |
|||
//获取停车记录 |
|||
const [recordData, setRecordData] = useState({}); |
|||
|
|||
function getRecord() { |
|||
ajax.showStopList({ id }).then((res) => { |
|||
if (res.status === 20000) { |
|||
setRecordData(res.data.list[0]); |
|||
} else { |
|||
message.error(res.message); |
|||
} |
|||
}); |
|||
} |
|||
|
|||
useEffect(() => { |
|||
getRecord(); |
|||
}, []); |
|||
return ( |
|||
<div> |
|||
<Descriptions title="停车场信息"> |
|||
<Descriptions.Item label="停车场名称"> |
|||
{recordData.park_name} |
|||
</Descriptions.Item> |
|||
<Descriptions.Item label="区域"> |
|||
{recordData.area_name} |
|||
</Descriptions.Item> |
|||
<Descriptions.Item label="商户"> |
|||
{recordData.shop_name} |
|||
</Descriptions.Item> |
|||
<Descriptions.Item label="车场类型"> |
|||
{recordData.road_type_name} |
|||
</Descriptions.Item> |
|||
</Descriptions> |
|||
<Descriptions title="停车信息"> |
|||
<Descriptions.Item label="车牌号"> |
|||
{recordData.plate_num} |
|||
</Descriptions.Item> |
|||
<Descriptions.Item label="会员手机号"> |
|||
{recordData.phone} |
|||
</Descriptions.Item> |
|||
<Descriptions.Item label="入场时间"> |
|||
{recordData.in_time} |
|||
</Descriptions.Item> |
|||
<Descriptions.Item label="出场时间"> |
|||
{recordData.out_time} |
|||
</Descriptions.Item> |
|||
<Descriptions.Item label="停车时长"> |
|||
{recordData.parking_time} |
|||
</Descriptions.Item> |
|||
<Descriptions.Item label="应收金额"> |
|||
{recordData.ys_money} |
|||
</Descriptions.Item> |
|||
<Descriptions.Item label="优惠金额"> |
|||
{recordData.yh_money} |
|||
</Descriptions.Item> |
|||
<Descriptions.Item label="实付金额"> |
|||
{recordData.sf_money} |
|||
</Descriptions.Item> |
|||
</Descriptions> |
|||
<Descriptions title="入场照片"> |
|||
<Descriptions.Item label="入场车辆照片"> |
|||
<Image src={recordData.in_veh_pic} /> |
|||
</Descriptions.Item> |
|||
<Descriptions.Item label="入场车牌照片"> |
|||
<Image src={recordData.in_plate_pic} /> |
|||
</Descriptions.Item> |
|||
</Descriptions> |
|||
</div> |
|||
); |
|||
} |
|||
|
|||
export default StopList; |
|||
@ -0,0 +1,48 @@ |
|||
import React, { useEffect, useState } from "react"; |
|||
import { Modal, message, Tabs } from "antd"; |
|||
import ajax from "@/services"; |
|||
import StopList from "./StopList"; |
|||
import RecordList from "./RecordList"; |
|||
import RefundList from "./RefundList"; |
|||
import "./index.scss"; |
|||
function Detail(props) { |
|||
const { visible = false, close = () => {}, onOk = () => {}, id } = props; |
|||
//tabs数据 |
|||
const tabsItems = [ |
|||
{ |
|||
label: "停车记录", |
|||
key: "1", |
|||
children: <StopList id={id} />, |
|||
}, |
|||
{ |
|||
label: "收费记录", |
|||
key: "2", |
|||
children: <RecordList id={id} />, |
|||
}, |
|||
{ |
|||
label: "退款记录", |
|||
key: "3", |
|||
children: <RefundList id={id} />, |
|||
}, |
|||
]; |
|||
//tabs的key |
|||
const [tabsKey, setTabsKey] = useState("1"); |
|||
function tabsChange(value) { |
|||
setTabsKey(value); |
|||
} |
|||
useEffect(() => {}, []); |
|||
return ( |
|||
<Modal |
|||
open={visible} |
|||
onCancel={close} |
|||
onOk={onOk} |
|||
destroyOnClose |
|||
title="详情" |
|||
width={1200} |
|||
> |
|||
<Tabs items={tabsItems} activeKey={tabsKey} onChange={tabsChange} /> |
|||
</Modal> |
|||
); |
|||
} |
|||
|
|||
export default Detail; |
|||
@ -0,0 +1,73 @@ |
|||
.ant-tabs { |
|||
margin-bottom: 16px; |
|||
|
|||
.ant-tabs-nav { |
|||
margin-bottom: 0 !important; |
|||
|
|||
&::before { |
|||
border-bottom: 1px solid var(--color-card-line) !important; |
|||
} |
|||
} |
|||
|
|||
.ant-tabs-nav-wrap { |
|||
width: 100%; |
|||
box-sizing: content-box; |
|||
|
|||
.ant-tabs-nav-list { |
|||
width: 340px; |
|||
|
|||
.ant-tabs-ink-bar { |
|||
height: 3px; |
|||
background-color: #00ccff; |
|||
} |
|||
|
|||
.ant-tabs-tab { |
|||
flex: 1; |
|||
width: 100%; |
|||
display: flex; |
|||
justify-content: center; |
|||
padding-bottom: 10px; |
|||
text-align: center; |
|||
cursor: pointer; |
|||
font-size: 14px !important; |
|||
font-family: MicrosoftYaHei; |
|||
text-align: center; |
|||
letter-spacing: 0.7px; |
|||
} |
|||
|
|||
.ant-tabs-tab-active { |
|||
div { |
|||
color: #00ccff; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
.yisa-table { |
|||
width: 100%; |
|||
|
|||
.ant-table-thead { |
|||
th { |
|||
background: var(--color-table-header-bg) !important; |
|||
} |
|||
} |
|||
|
|||
.ant-table-tbody { |
|||
td { |
|||
background: var(--color-table-body-bg) !important; |
|||
border-bottom-color: var(--color-table-border-bottom-color); |
|||
} |
|||
|
|||
tr:nth-child(even) { |
|||
td { |
|||
background: var(--color-table-body-bg-nth-child-even) !important; |
|||
} |
|||
} |
|||
|
|||
tr:nth-child(odd) { |
|||
td { |
|||
background: var(--color-table-body-bg-nth-child-even) !important; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
@ -1,15 +1,213 @@ |
|||
import React, { useState, useRef, useEffect } from "react"; |
|||
// import { message, Pagination, Table, Space, Modal, } from "antd"; |
|||
import { |
|||
message, |
|||
Pagination, |
|||
Table, |
|||
Space, |
|||
Modal, |
|||
Button, |
|||
Popover, |
|||
DatePicker, |
|||
InputNumber, |
|||
} 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 ajax from "@/services"; |
|||
import { TableModule } from "@/components"; |
|||
import Detail from "./Detail"; |
|||
// import "./index.scss"; |
|||
// import errorImg from "@/assets/images/layout/error.png" |
|||
// import { useLocation } from "react-router-dom"; |
|||
|
|||
function ZombieCarMgm() { |
|||
return <div>ZombieCarMgm</div> |
|||
const columns = [ |
|||
{ |
|||
title: "城市", |
|||
dataIndex: "city_name", |
|||
key: "city_name", |
|||
}, |
|||
{ |
|||
title: "商户名称", |
|||
dataIndex: "shop_name", |
|||
key: "shop_name", |
|||
}, |
|||
{ |
|||
title: "停车场名称", |
|||
dataIndex: "park_name", |
|||
key: "park_name", |
|||
}, |
|||
{ |
|||
title: "区域", |
|||
dataIndex: "area_name", |
|||
key: "area_name", |
|||
}, |
|||
{ |
|||
title: "车厂管理模式", |
|||
dataIndex: "road_type_name", |
|||
key: "road_type_name", |
|||
}, |
|||
{ |
|||
title: "车牌号", |
|||
dataIndex: "plate_name", |
|||
key: "plate_name", |
|||
}, |
|||
{ |
|||
title: "泊位号", |
|||
dataIndex: "bowei_name", |
|||
key: "bowei_name", |
|||
}, |
|||
{ |
|||
title: "入场时间", |
|||
dataIndex: "in_time", |
|||
key: "in_time", |
|||
}, |
|||
{ |
|||
title: "停车时长", |
|||
dataIndex: "parking_time", |
|||
key: "parking_time", |
|||
}, |
|||
{ |
|||
title: "操作", |
|||
dataIndex: "operation", |
|||
key: "operation", |
|||
render: (_, record) => { |
|||
return ( |
|||
<Button |
|||
type="primary" |
|||
onClick={() => { |
|||
setDetailModal({ ...detailModal, visible: true, id: record.id }); |
|||
}} |
|||
> |
|||
详情 |
|||
</Button> |
|||
); |
|||
}, |
|||
}, |
|||
]; |
|||
const formSearch = [ |
|||
{ |
|||
name: "region", |
|||
type: "TreeSelect", |
|||
label: "区域", |
|||
}, |
|||
{ |
|||
name: "operator", |
|||
type: "Select", |
|||
label: "商户名称", |
|||
placeholder: "请选择商户名称", |
|||
}, |
|||
{ |
|||
name: "road", |
|||
type: "Input", |
|||
label: "停车场名称", |
|||
placeholder: "请输入停车场名称", |
|||
}, |
|||
{ |
|||
name: "plate", |
|||
type: "Input", |
|||
label: "车牌号", |
|||
placeholder: "请输入车牌号", |
|||
}, |
|||
{ |
|||
type: "__react_node", |
|||
name: "in_time", |
|||
label: "入场时间", |
|||
component: () => { |
|||
return <DatePicker />; |
|||
}, |
|||
}, |
|||
{ |
|||
type: "__react_node", |
|||
name: "parking_time", |
|||
label: "停车时长", |
|||
component: () => { |
|||
return <InputNumber addonAfter="天" />; |
|||
}, |
|||
}, |
|||
]; |
|||
//搜索参数初始化 |
|||
const initFormData = {}; |
|||
|
|||
//搜索的结果 |
|||
const [tableData, setTableData] = useState([]); |
|||
//搜索的总结果数 |
|||
const [total, setTotal] = useState(0); |
|||
//清理僵尸车弹窗 |
|||
const [zomCarModal, setZomCarModal] = useState(false); |
|||
//详情弹窗 |
|||
const [detailModal, setDetailModal] = useState({ |
|||
id: "", |
|||
visible: false, |
|||
close: () => setDetailModal({ ...detailModal, visible: false }), |
|||
onOk: () => { |
|||
detailModal.close(); |
|||
}, |
|||
}); |
|||
const [selectRowKeys, setSelectRowKeys] = useState([]); |
|||
function onSelectChange(newSelectRowKeys) { |
|||
setSelectRowKeys(newSelectRowKeys); |
|||
} |
|||
function fetch(params) { |
|||
ajax.getAllZomcar(params).then((res) => { |
|||
if (res.status === 20000) { |
|||
setTableData(res.data.list); |
|||
setTotal(res.data.total_records); |
|||
} |
|||
}); |
|||
} |
|||
function cleanZomCar() { |
|||
ajax.cleanZomCar({ id: selectRowKeys.join(",") }).then((res) => { |
|||
if (res.status === 20000) { |
|||
message.success("清理成功"); |
|||
} else { |
|||
message.error(res.message); |
|||
} |
|||
setZomCarModal(false); |
|||
}); |
|||
} |
|||
function cleanZomCarComponent() { |
|||
return ( |
|||
<Button type="primary" onClick={() => setZomCarModal(true)}> |
|||
清理僵尸车 |
|||
</Button> |
|||
); |
|||
} |
|||
|
|||
return ( |
|||
<> |
|||
<TableModule |
|||
columns={columns} |
|||
tableData={tableData} |
|||
formSearch={formSearch} |
|||
total={total} |
|||
rowKey={"id"} |
|||
rowSelection={{ |
|||
selectRowKeys, |
|||
onChange: onSelectChange, |
|||
}} |
|||
pagename="僵尸车管理" |
|||
search={fetch} |
|||
rightButtonGroup={[cleanZomCarComponent()]} |
|||
initFormData={initFormData} |
|||
exportUrl="/PMS/api/bpm/offroad/export_zomcar" |
|||
/> |
|||
<Modal |
|||
open={zomCarModal} |
|||
title="提示" |
|||
onOk={cleanZomCar} |
|||
onCancel={() => setZomCarModal(false)} |
|||
> |
|||
<p>{selectRowKeys.length}条记录即将被清理</p> |
|||
</Modal> |
|||
<Detail |
|||
visible={detailModal.visible} |
|||
close={detailModal.close} |
|||
onOk={detailModal.onOk} |
|||
id={detailModal.id} |
|||
/> |
|||
</> |
|||
); |
|||
} |
|||
|
|||
export default ZombieCarMgm; |
|||
export default ZombieCarMgm; |
|||
@ -0,0 +1,11 @@ |
|||
import ajax from "@/config/ajax"; |
|||
///api/orp/business/get_record_list 停车记录查询/欠费订单-列表
|
|||
const getRecordList = (params) => { |
|||
return ajax({ |
|||
url: "/api/orp/business/get_record_list ", |
|||
type: "post", |
|||
data: params, |
|||
}); |
|||
}; |
|||
|
|||
export default { getRecordList }; |
|||
@ -0,0 +1,57 @@ |
|||
import ajax from "@/config/ajax"; |
|||
///PMS/api/bpm/offroad/get_all_zomcar 查看列表数据
|
|||
const getAllZomcar = (params) => { |
|||
return ajax({ |
|||
url: "/PMS/api/bpm/offroad/get_all_zomcar", |
|||
type: "post", |
|||
data: params, |
|||
}); |
|||
}; |
|||
///PMS/api/bpm/offroad/clear_zomcar 清理僵尸车
|
|||
const cleanZomCar = (params) => { |
|||
return ajax({ |
|||
url: "/PMS/api/bpm/offroad/clear_zomcar", |
|||
type: "post", |
|||
data: params, |
|||
}); |
|||
}; |
|||
///PMS/api/bpm/offroad/show_stop_list 查看停车列表
|
|||
const showStopList = (params) => { |
|||
return ajax({ |
|||
url: "/PMS/api/bpm/offroad/show_stop_list", |
|||
type: "post", |
|||
data: params, |
|||
}); |
|||
}; |
|||
///PMS/api/bpm/offroad/show_pay_list 查看支付记录
|
|||
const showPayList = (params) => { |
|||
return ajax({ |
|||
url: "/PMS/api/bpm/offroad/show_pay_list ", |
|||
type: "post", |
|||
data: params, |
|||
}); |
|||
}; |
|||
///PMS/api/bpm/offroad/show_refound_list 退款订单
|
|||
const showRefoundList = (params) => { |
|||
return ajax({ |
|||
url: "/PMS/api/bpm/offroad/show_refound_list", |
|||
type: "post", |
|||
data: params, |
|||
}); |
|||
}; |
|||
///PMS/api/bpm/offroad/export_zomcar 导出接口
|
|||
const exportZomCar = (params) => { |
|||
return ajax({ |
|||
url: "/PMS/api/bpm/offroad/export_zomcar", |
|||
type: "post", |
|||
data: params, |
|||
}); |
|||
}; |
|||
export default { |
|||
getAllZomcar, |
|||
cleanZomCar, |
|||
showStopList, |
|||
showPayList, |
|||
showRefoundList, |
|||
exportZomCar, |
|||
}; |
|||
@ -1,5 +1,8 @@ |
|||
import OutSegment from "./OutSegment"; |
|||
|
|||
import ZombieCarMgm from "./ZombieCarMgm"; |
|||
import OutParkingRecordInquiry from "./OutParkingRecordInquiry"; |
|||
export default { |
|||
...OutSegment, |
|||
...ZombieCarMgm, |
|||
...OutParkingRecordInquiry, |
|||
}; |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue