|
|
|
@ -1,12 +1,10 @@ |
|
|
|
|
|
|
|
import React, { useState, useRef, useEffect } from "react"; |
|
|
|
import React, { useState, useEffect } from "react"; |
|
|
|
import { message, Pagination, Table, Select, Input, DatePicker, Button, Popover, Modal } from "antd"; |
|
|
|
import { dictionary, utils } from "@/config/common"; |
|
|
|
import { dictionary } from "@/config/common"; |
|
|
|
import moment from "moment"; |
|
|
|
import { useSessionStorageState } from "ahooks"; |
|
|
|
import ajax from "@/services"; |
|
|
|
import { QuickMenu } from "@/components"; |
|
|
|
import RecordReviewModal from "@/components/ParkingRecordModal/RecordReviewModal"; |
|
|
|
import "./index.scss"; |
|
|
|
|
|
|
|
function TransitionReport() { |
|
|
|
@ -21,15 +19,25 @@ function TransitionReport() { |
|
|
|
pn: 1, |
|
|
|
page_size: dictionary?.pageSizeOptions1[0] |
|
|
|
}; |
|
|
|
|
|
|
|
// 详情默认请求参数 |
|
|
|
const modalDefaultData = { |
|
|
|
pn: 1, |
|
|
|
page_size: dictionary?.pageSizeOptions1[0] |
|
|
|
}; |
|
|
|
|
|
|
|
const timeSel = [ |
|
|
|
{value: "1", label: "按上班时间"}, |
|
|
|
{value: "2", label: "按下班时间"}, |
|
|
|
]; |
|
|
|
|
|
|
|
const [formData, setFormData] = useState(defaultData); // 表单数据 |
|
|
|
const [modalDetailData, setModalDetailData] = useState(modalDefaultData); // 模态框请求参数 |
|
|
|
const [sessionData, setSessionData] = useSessionStorageState("transitionReport", { value: {} }); // session缓存 |
|
|
|
const [operatorList, setOperatorList] = useState([{ value: "0", label: "全部" }]); // 商户名称查询数据 |
|
|
|
const [loading, setLoading] = useState(false); // 检索按钮加载状态 |
|
|
|
const [detailOpen, setDetailOpen] = useState(false); // 详情模态框 |
|
|
|
const [detailLoad, setDetailLoad] = useState(false); // 详情模态框表格加载 |
|
|
|
|
|
|
|
// 表格返回数据 |
|
|
|
const [resultData, setResultData] = useState({ |
|
|
|
@ -37,7 +45,12 @@ function TransitionReport() { |
|
|
|
list: [], |
|
|
|
}); |
|
|
|
|
|
|
|
//列表 |
|
|
|
// 详情模态框表格数据 |
|
|
|
const [detailData, setDetailData] = useState({ |
|
|
|
total: 0, |
|
|
|
list: [], |
|
|
|
}); |
|
|
|
// 列表 |
|
|
|
const tableColumns = [ |
|
|
|
{ |
|
|
|
title: "序号", |
|
|
|
@ -109,7 +122,21 @@ function TransitionReport() { |
|
|
|
overlayClassName="start-exception-deal-operate" |
|
|
|
content={ |
|
|
|
<div className="operateBtn operate-btn" style={{ cursor: "pointer" }} trigger="hover"> |
|
|
|
<div className="hover" onClick={() => console.log("详情")}>详情</div> |
|
|
|
<div |
|
|
|
className="hover" |
|
|
|
onClick={() => { |
|
|
|
let _data = { |
|
|
|
...formData, |
|
|
|
...modalDefaultData, |
|
|
|
id: record?.id |
|
|
|
}; |
|
|
|
setModalDetailData(_data); |
|
|
|
$getModalTableList(_data); |
|
|
|
setDetailOpen(true); |
|
|
|
}} |
|
|
|
> |
|
|
|
详情 |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
} |
|
|
|
> |
|
|
|
@ -120,6 +147,80 @@ function TransitionReport() { |
|
|
|
}, |
|
|
|
]; |
|
|
|
|
|
|
|
// 模态框列表 |
|
|
|
const modalTableColumns = [ |
|
|
|
{ |
|
|
|
title: "区域", |
|
|
|
dataIndex: "region", |
|
|
|
key: "region", |
|
|
|
align: "center", |
|
|
|
render: (text, record, index) => text || "--", |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: "车场名称", |
|
|
|
dataIndex: "park_name", |
|
|
|
key: "park_name", |
|
|
|
align: "center", |
|
|
|
render: (text, record, index) => text || "--", |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: "所属商户", |
|
|
|
dataIndex: "operator", |
|
|
|
key: "operator", |
|
|
|
align: "center", |
|
|
|
render: (text, record, index) => text || "--", |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: "车场类型", |
|
|
|
dataIndex: "park_type", |
|
|
|
key: "park_type", |
|
|
|
align: "center", |
|
|
|
render: (text, record, index) => text || "--", |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: "车牌号", |
|
|
|
dataIndex: "plate_number", |
|
|
|
key: "plate_number", |
|
|
|
align: "center", |
|
|
|
render: (text, record, index) => text || "--", |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: "入场时间", |
|
|
|
dataIndex: "in_time", |
|
|
|
key: "in_time", |
|
|
|
align: "center", |
|
|
|
render: (text, record, index) => text || "--", |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: "出场时间", |
|
|
|
dataIndex: "out_time", |
|
|
|
key: "out_time", |
|
|
|
align: "center", |
|
|
|
render: (text, record, index) => text || "--", |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: "停车时长", |
|
|
|
dataIndex: "admission_time", |
|
|
|
key: "admission_time", |
|
|
|
align: "center", |
|
|
|
render: (text, record, index) => text || "--", |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: "应收金额", |
|
|
|
dataIndex: "receivable_amount", |
|
|
|
key: "receivable_amount", |
|
|
|
align: "center", |
|
|
|
render: (text, record, index) => text || "--", |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: "实收金额", |
|
|
|
dataIndex: "actual_amount", |
|
|
|
key: "actual_amount", |
|
|
|
align: "center", |
|
|
|
render: (text, record, index) => text || "--", |
|
|
|
}, |
|
|
|
]; |
|
|
|
|
|
|
|
// 获取商户名称 |
|
|
|
const $getAllOperator = () => { |
|
|
|
ajax.ElectInvoice.getSelectOperator().then((res) => { |
|
|
|
@ -152,6 +253,25 @@ function TransitionReport() { |
|
|
|
$getTableList(temFormData); |
|
|
|
}; |
|
|
|
|
|
|
|
// 模态框表格分页 |
|
|
|
const $changePnModal = (pn, page_size) => { |
|
|
|
let temFormData = {}; |
|
|
|
if (modalDetailData.page_size == page_size) { |
|
|
|
temFormData = { |
|
|
|
...modalDetailData, |
|
|
|
pn |
|
|
|
}; |
|
|
|
} else { |
|
|
|
temFormData = { |
|
|
|
...modalDetailData, |
|
|
|
pn: 1, |
|
|
|
page_size, |
|
|
|
}; |
|
|
|
}; |
|
|
|
setModalDetailData(temFormData); |
|
|
|
$getModalTableList(temFormData); |
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
// 获取表格数据 |
|
|
|
const $getTableList = (value = {}) => { |
|
|
|
@ -174,6 +294,25 @@ function TransitionReport() { |
|
|
|
}); |
|
|
|
}; |
|
|
|
|
|
|
|
// 获取模态框表格数据 |
|
|
|
const $getModalTableList = (value) => { |
|
|
|
let _data = { |
|
|
|
...modalDetailData, |
|
|
|
...value |
|
|
|
}; |
|
|
|
ajax.getModalTransitionReportData(_data).then((res) => { |
|
|
|
setLoading(false); |
|
|
|
if (res.status === 20000) { |
|
|
|
setDetailData(res?.data || {}); |
|
|
|
} else { |
|
|
|
message.error(res.message); |
|
|
|
} |
|
|
|
}).catch((error) => { |
|
|
|
setLoading(false); |
|
|
|
message.error(error.message); |
|
|
|
}); |
|
|
|
}; |
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
let _data = {}; |
|
|
|
if (sessionData && Object.values(sessionData).length > 0) { |
|
|
|
@ -341,14 +480,37 @@ function TransitionReport() { |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
{/* <Modal |
|
|
|
title="提示" |
|
|
|
open={jobStatusEditOpen.open} |
|
|
|
onOk={() => $jobStatusEdit(jobStatusEditOpen.data)} |
|
|
|
onCancel={() => { setJobStatusEditOpen({ open: false, data: {} }) }} |
|
|
|
<Modal |
|
|
|
title="现金收入详情" |
|
|
|
className="transition-report-modal" |
|
|
|
open={detailOpen} |
|
|
|
// onOk={() => $jobStatusEdit(detailModal.data)} |
|
|
|
onCancel={() => { setDetailOpen(false); setModalDetailData(modalDefaultData) }} |
|
|
|
footer={null} |
|
|
|
> |
|
|
|
<p>此操作将改变在职状态, 是否继续?</p> |
|
|
|
</Modal> */} |
|
|
|
<div className="result-data-modal"> |
|
|
|
<Table |
|
|
|
rowKey={(row) => row.id} |
|
|
|
className="table yisa-table-scroll" |
|
|
|
dataSource={detailData.list || []} |
|
|
|
columns={modalTableColumns} |
|
|
|
pagination={false} |
|
|
|
loading={detailLoad} |
|
|
|
scroll={{ y: "calc(100% - 50px)" }} |
|
|
|
/> |
|
|
|
<Pagination |
|
|
|
className="pagination-common" |
|
|
|
showSizeChanger={true} |
|
|
|
showQuickJumper={true} |
|
|
|
showTotal={() => `共 ${detailData.total || 0} 条`} |
|
|
|
total={detailData.total} |
|
|
|
current={modalDetailData.pn} |
|
|
|
pageSize={modalDetailData.page_size} |
|
|
|
pageSizeOptions={dictionary?.pageSizeOptions1} |
|
|
|
onChange={$changePnModal} |
|
|
|
/> |
|
|
|
</div> |
|
|
|
</Modal> |
|
|
|
</div> |
|
|
|
); |
|
|
|
} |
|
|
|
|
陈宇航
xxxxxxxxxx