12 changed files with 1414 additions and 85 deletions
-
458src/pages/FinancialMgm/ExceptionDeal/DealRecordAudit/index.jsx
-
212src/pages/FinancialMgm/ExceptionDeal/DealRecordAudit/index.scss
-
461src/pages/FinancialMgm/ExceptionDeal/DealRecordList/index.jsx
-
212src/pages/FinancialMgm/ExceptionDeal/DealRecordList/index.scss
-
29src/pages/FinancialMgm/PayConf/AppConf/index.jsx
-
12src/pages/OperationCenter/CarMgm/CarAuth/index.scss
-
30src/pages/OperationCenter/CarMgm/CarAuth/loadable.jsx
-
33src/pages/OperationCenter/CarMgm/CarInfo/index.scss
-
22src/pages/OperationCenter/CarMgm/CarInfo/loadable.jsx
-
2src/pages/OperationCenter/UserMgm/UserInfo/index.scss
-
10src/pages/OperationCenter/UserMgm/UserInfo/loadable.jsx
-
18src/services/FinancialMgm/exceptionDeal.js
@ -1,15 +1,453 @@ |
|||
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 { message, Pagination, Table, Select, Input, Cascader, DatePicker, Button, Popover } from "antd"; |
|||
import { dictionary, utils } from "@/config/common"; |
|||
import moment from "moment"; |
|||
import { useSessionStorageState, useUpdateEffect } from "ahooks"; |
|||
import ajax from "@/services"; |
|||
import { QuickMenu, ParkingRecordModal } from "@/components"; |
|||
import "./index.scss"; |
|||
import errorImg from "@/assets/images/layout/error.png"; |
|||
import { useLocation } from "react-router-dom"; |
|||
function DealRecordAudit() { |
|||
return <div>DealRecordAudit</div> |
|||
// 默认数据 |
|||
const defaultData = { |
|||
park_id: "", // 停车订单ID |
|||
operator: 0, // 商户名称 |
|||
region: [0], // 区域 |
|||
road: "", // 车场名称 |
|||
road_type: 0, // 车场类型 |
|||
plate: "", // 车牌号 |
|||
type: 1, // 出入场类型 1: 入场 2: 出场 |
|||
start_time: moment().subtract(7, "days").startOf("day").format("YYYY-MM-DD HH:mm:ss"), // 开始时间 |
|||
end_time: moment().format("YYYY-MM-DD HH:mm:ss"), // 结束时间 |
|||
pn: 1, |
|||
page_size: dictionary?.pageSizeOptions1[0] |
|||
}; |
|||
|
|||
const [formData, setFormData] = useState(defaultData); // 表单数据 |
|||
const [operatorList, setOperatorList] = useState([{ value: 0, label: "全部" }]); //商户名称 |
|||
const [areaList, setAreaList] = useState([]); //区域的下拉数据 |
|||
const [loading, setLoading] = useState(false); // 检索按钮加载状态 |
|||
const [tableSelectCheck, setTableSelectCheck] = useState([]); // 列表选中的停车订单id |
|||
const [parkingRecordModal, setParkingRecordModal] = useState({ open: false, tableData: {} }); // 详情弹框 |
|||
|
|||
// 表格返回数据 |
|||
const [resultData, setResultData] = useState({ |
|||
total: 0, |
|||
list: [], |
|||
}); |
|||
|
|||
//列表 |
|||
const tableColumns = [ |
|||
{ |
|||
title: "序号", |
|||
width: 60, |
|||
align: "center", |
|||
fixed: 'left', |
|||
render: (text, record, index) => index + 1, |
|||
}, |
|||
{ |
|||
title: "处理记录ID", |
|||
dataIndex: "deal_record_id", |
|||
key: "deal_record_id", |
|||
width: 200, |
|||
align: "center", |
|||
fixed: 'left', |
|||
render: (text) => ( |
|||
<> |
|||
<a onClick={() => { |
|||
navigator.clipboard.writeText(`${text}`).then(() => { message.success("已复制到剪切板") }); |
|||
}}>{text}</a> |
|||
</> |
|||
), |
|||
}, |
|||
{ |
|||
title: "处理时间", |
|||
dataIndex: "deal_time", |
|||
key: "deal_time", |
|||
align: "center", |
|||
width: 150, |
|||
}, |
|||
{ |
|||
title: "处理人", |
|||
dataIndex: "dealer", |
|||
key: "dealer", |
|||
align: "center", |
|||
width: 150, |
|||
}, |
|||
{ |
|||
title: "业务订单类型", |
|||
dataIndex: "business_type", |
|||
key: "business_type", |
|||
align: "center", |
|||
width: 150, |
|||
}, |
|||
{ |
|||
title: "业务订单ID", |
|||
dataIndex: "park_id", |
|||
key: "park_id", |
|||
align: "center", |
|||
width: 150, |
|||
}, |
|||
{ |
|||
title: "更改项", |
|||
dataIndex: "change_content", |
|||
key: "change_content", |
|||
align: "center", |
|||
width: 150, |
|||
render: (text, record, index) => { |
|||
let content = '' |
|||
switch (text) { |
|||
case 1: |
|||
content = "调整出场时间" |
|||
break; |
|||
case 2: |
|||
content = "变更车牌号" |
|||
break; |
|||
case 3: |
|||
content = "更改订单金额" |
|||
break; |
|||
case 4: |
|||
content = "免费该订单" |
|||
break; |
|||
case 5: |
|||
content = "作废该订单" |
|||
break; |
|||
default: |
|||
break; |
|||
} |
|||
return <>{content}</> |
|||
}, |
|||
}, |
|||
{ |
|||
title: "更改项初始值", |
|||
dataIndex: "initial_value", |
|||
key: "initial_value", |
|||
align: "center", |
|||
width: 150, |
|||
}, |
|||
{ |
|||
title: "更改项更新值", |
|||
dataIndex: "update_value", |
|||
key: "update_value", |
|||
align: "center", |
|||
width: 150, |
|||
}, |
|||
{ |
|||
title: "状态", |
|||
dataIndex: "status", |
|||
key: "status", |
|||
align: "center", |
|||
width: 150, |
|||
render: (text, record, index) => { |
|||
let content = '--' |
|||
switch (text) { |
|||
case 1: |
|||
content = "待审核" |
|||
break; |
|||
case 2: |
|||
content = "已完成" |
|||
break; |
|||
case 3: |
|||
content = "已驳回" |
|||
break; |
|||
default: |
|||
break; |
|||
} |
|||
return <>{content}</> |
|||
}, |
|||
}, |
|||
{ |
|||
title: '操作', |
|||
key: 'operation', |
|||
dataIndex: 'operation', |
|||
align: "center", |
|||
fixed: 'right', |
|||
width: 100, |
|||
render: (text, record, index) => { |
|||
return <> |
|||
<Popover |
|||
overlayClassName="start-exception-deal-operate" |
|||
content={ |
|||
<div className="operateBtn operate-btn" style={{ cursor: "pointer" }} trigger="hover"> |
|||
<div className="hover" onClick={() => { setParkingRecordModal({ open: true, tableData: record || {} }) }}>查看</div> |
|||
{record?.status_now == 2 ? |
|||
<div className="disabled">处理中</div> : |
|||
<div className="hover" onClick={() => { console.log("处理"); }}>处理</div> |
|||
} |
|||
</div> |
|||
} |
|||
> |
|||
<Button type="primary">操作</Button> |
|||
</Popover> |
|||
</> |
|||
}, |
|||
}, |
|||
]; |
|||
|
|||
// 批量处理 |
|||
const $batchProcessing = () => { |
|||
if (!tableSelectCheck?.length) return message.error("请选择需要处理的数据！"); |
|||
console.log(tableSelectCheck); |
|||
}; |
|||
|
|||
// 分页 |
|||
const $changePn = (pn, page_size) => { |
|||
let temFormData = {}; |
|||
if (formData.page_size == page_size) { |
|||
temFormData = { |
|||
...formData, |
|||
pn |
|||
}; |
|||
} else { |
|||
temFormData = { |
|||
...formData, |
|||
pn: 1, |
|||
page_size, |
|||
}; |
|||
}; |
|||
setFormData(temFormData); |
|||
$getTableList(temFormData); |
|||
}; |
|||
|
|||
// 获取商户名称 |
|||
const $getAllOperator = () => { |
|||
ajax |
|||
.getAllOperator() |
|||
.then((res) => { |
|||
if (res.status === 20000 || res.status == 0) { |
|||
setOperatorList(res.data || { value: 0, label: "全部" }); |
|||
} else { |
|||
message.error(res.message); |
|||
} |
|||
}) |
|||
.catch((error) => { |
|||
message.error(error.message); |
|||
}); |
|||
}; |
|||
|
|||
// 获取区域树结构 |
|||
const $getAreaList = () => { |
|||
ajax |
|||
.getAreaTree() |
|||
.then((res) => { |
|||
if (res.status === 20000 || res.status == 0) { |
|||
setAreaList( |
|||
res.data || [{ name: "全部", id: 0, level: 1, children: [] }] |
|||
); |
|||
} else { |
|||
message.error(res.message); |
|||
} |
|||
}) |
|||
.catch((error) => { |
|||
message.error(error.message); |
|||
}); |
|||
}; |
|||
|
|||
// 获取表格数据 |
|||
const $getTableList = (value = {}) => { |
|||
setTableSelectCheck([]); // 清空表格选中项 |
|||
let _data = { |
|||
...formData, |
|||
...value |
|||
}; |
|||
setLoading(true); |
|||
ajax.getDealRecordListTableData(_data).then((res) => { |
|||
setLoading(false); |
|||
if (res.status === 20000 || res.status == 0) { |
|||
setResultData(res?.data || {}); |
|||
} else { |
|||
message.error(res.message); |
|||
} |
|||
}).catch((error) => { |
|||
setLoading(false); |
|||
message.error(error.message); |
|||
}); |
|||
}; |
|||
|
|||
useEffect(() => { |
|||
$getAllOperator(); |
|||
$getAreaList(); |
|||
$getTableList(); |
|||
}, []); |
|||
return ( |
|||
<div className="start-exception-deal"> |
|||
<div className="paid-search"> |
|||
<div className="title">查询条件</div> |
|||
<div className="form-Wrap"> |
|||
<div className="yisa-search"> |
|||
<label>处理记录ID</label> |
|||
<Input |
|||
className="form-con" |
|||
placeholder="请输入处理记录ID" |
|||
value={formData?.deal_record_id} |
|||
allowClear |
|||
onChange={(e) => |
|||
setFormData({ ...formData, deal_record_id: e.target.value || "" }) |
|||
} |
|||
/> |
|||
</div> |
|||
<div className="yisa-search"> |
|||
<label>业务订单类型</label> |
|||
<Select |
|||
className="form-con" |
|||
placeholder="请选择" |
|||
options={[ |
|||
{ |
|||
label: "全部", |
|||
value: -1, |
|||
}, |
|||
|
|||
]} |
|||
value={formData.business_type} |
|||
onChange={(v) => setFormData({ ...formData, business_type: v })} |
|||
/> |
|||
</div> |
|||
<div className="yisa-search"> |
|||
<label>业务订单ID</label> |
|||
<Input |
|||
className="form-con" |
|||
placeholder="请输入业务订单ID" |
|||
value={formData?.park_id} |
|||
allowClear |
|||
onChange={(e) => |
|||
setFormData({ ...formData, park_id: e.target.value || "" }) |
|||
} |
|||
/> |
|||
</div> |
|||
<div className="yisa-search"> |
|||
<label>时间段</label> |
|||
<DatePicker |
|||
className="form-con" |
|||
showTime |
|||
format={"YYYY-MM-DD HH:mm:ss"} |
|||
value={moment(formData.start_time)} |
|||
disabledDate={(current) => current > moment(formData.end_time)} |
|||
onChange={(date, time) => { |
|||
setFormData({ ...formData, start_time: time || null }) |
|||
}} |
|||
/> |
|||
</div> |
|||
<div className="yisa-search" style={{ marginBottom: "0" }}> |
|||
<label>至</label> |
|||
<DatePicker |
|||
className="form-con" |
|||
showTime |
|||
format={"YYYY-MM-DD HH:mm:ss"} |
|||
value={moment(formData.end_time)} |
|||
disabledDate={(current) => current < moment(formData.start_time)} |
|||
onChange={(date, time) => { |
|||
setFormData({ ...formData, end_time: time || null }) |
|||
}} |
|||
/> |
|||
</div> |
|||
<div className="yisa-search"> |
|||
<label></label> |
|||
<QuickMenu |
|||
dropdownData={[ |
|||
{ text: '昨日', value: 1 }, |
|||
{ text: '近30天', value: 30 }, |
|||
{ text: '近90天', value: 90 }, |
|||
{ text: '近180天', value: 180 } |
|||
]} |
|||
onChange={(v) => { |
|||
let plate = formData?.plateNumber || ""; |
|||
let value = v?.value || 0; |
|||
if (plate) { |
|||
console.log(utils?.validationPlate(plate)) |
|||
if (utils?.validationPlate(plate)) { |
|||
setFormData({ |
|||
...formData, |
|||
end_time: v?.endDateTime || null, |
|||
start_time: v?.startDateTime || null, |
|||
}) |
|||
} else { |
|||
message.error('请正确输入车牌号') |
|||
return |
|||
} |
|||
} else { |
|||
if (value > 30) return message.warning("请输入您查询的车牌号！"); |
|||
} |
|||
setFormData({ |
|||
...formData, |
|||
end_time: v?.endDateTime || null, |
|||
start_time: v?.startDateTime || null, |
|||
}) |
|||
}} |
|||
/> |
|||
</div> |
|||
<div className="form-btn"> |
|||
<Button |
|||
className="reset" |
|||
onClick={() => setFormData({ ...defaultData, pn: formData?.pn || 1, page_size: formData?.page_size || dictionary?.pageSizeOptions1[0] })} |
|||
> |
|||
重置 |
|||
</Button> |
|||
<Button |
|||
className="submit" |
|||
type="primary" |
|||
onClick={() => { |
|||
let _data = { |
|||
...formData, |
|||
pn: 1, |
|||
page_size: dictionary?.pageSizeOptions1[0] |
|||
} |
|||
setFormData(_data) |
|||
$getTableList(_data) |
|||
}} |
|||
loading={loading} |
|||
> |
|||
查询 |
|||
</Button> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div className="paid-result"> |
|||
<div className="result"> |
|||
<div className="row-head"> |
|||
<span className="number-wrapper"></span> |
|||
</div> |
|||
<div className="result-data"> |
|||
<Table |
|||
rowKey={(row) => row.park_id} |
|||
className="table" |
|||
dataSource={resultData?.list || []} |
|||
columns={tableColumns} |
|||
pagination={false} |
|||
loading={loading} |
|||
// rowSelection={{ |
|||
// selectedRowKeys: tableSelectCheck, |
|||
// onChange: (selectedRowKeys, selectedRows) => { |
|||
// console.log(selectedRowKeys, selectedRows); |
|||
// setTableSelectCheck(selectedRowKeys) |
|||
// }, |
|||
// getCheckboxProps: (record) => ({ |
|||
// disabled: record?.status_now == 2 |
|||
// }) |
|||
// }} |
|||
scroll={{ x: "1500", y: "calc(100vh - 310px)" }} |
|||
/> |
|||
<Pagination |
|||
className="pagination-common" |
|||
showSizeChanger={true} |
|||
showQuickJumper={true} |
|||
showTotal={() => `共 ${resultData.total || 0} 条`} |
|||
total={resultData.total} |
|||
current={formData.pn} |
|||
pageSize={formData.page_size} |
|||
pageSizeOptions={dictionary?.pageSizeOptions1} |
|||
onChange={$changePn} |
|||
/> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<ParkingRecordModal |
|||
title={parkingRecordModal?.tableData?.road || null} |
|||
{...parkingRecordModal} |
|||
onCancel={() => { setParkingRecordModal({ open: false, tableData: {} }) }} |
|||
/> |
|||
</div> |
|||
); |
|||
} |
|||
|
|||
export default DealRecordAudit; |
|||
@ -1,5 +1,209 @@ |
|||
@import "@/assets/css/mixin.scss"; |
|||
$color-container-bg : var(--color-container-bg); |
|||
$color-user-list-bg : var(--color-user-list-bg); |
|||
$color-text : var(--color-text); |
|||
$color-primary : var(--color-primary); |
|||
$color-container-bg: var(--color-container-bg); |
|||
$color-user-list-bg: var(--color-user-list-bg); |
|||
$color-text: var(--color-text); |
|||
$color-primary: var(--color-primary); |
|||
|
|||
.start-exception-deal { |
|||
display: flex; |
|||
padding-top: 10px; |
|||
width: 100%; |
|||
height: 100%; |
|||
.paid-search { |
|||
display: block; |
|||
width: 375px; |
|||
padding: 10px 10px 20px 20px; |
|||
.title { |
|||
width: 100%; |
|||
font-size: 16px; |
|||
font-family: Microsoft YaHei, Microsoft YaHei-Bold; |
|||
font-weight: 700; |
|||
text-align: left; |
|||
color: var(--color-text); |
|||
margin-bottom: 20px; |
|||
} |
|||
.form-Wrap { |
|||
height: calc(100% - 45px); |
|||
overflow-y: auto; |
|||
scrollbar-width: none; |
|||
-ms-overflow-style: none; |
|||
|
|||
&::-webkit-scrollbar { |
|||
display: none; |
|||
} |
|||
} |
|||
.yisa-search { |
|||
width: 100%; |
|||
display: flex; |
|||
align-items: center; |
|||
margin-bottom: 24px; |
|||
|
|||
label { |
|||
color: var(--color-search-list-item-text); |
|||
flex: 0 0 25%; |
|||
max-width: 25%; |
|||
text-align: right; |
|||
padding-right: 8px; |
|||
} |
|||
|
|||
.form-con { |
|||
flex: 1; |
|||
width: 220px; |
|||
} |
|||
} |
|||
.form-btn { |
|||
display: flex; |
|||
flex-flow: row nowrap; |
|||
padding: 0 10px; |
|||
justify-content: space-between; |
|||
.reset { |
|||
width: 90px; |
|||
height: 36px; |
|||
border-radius: 4px; |
|||
} |
|||
.submit { |
|||
width: calc(100% - 100px); |
|||
height: 36px; |
|||
border-radius: 4px; |
|||
} |
|||
} |
|||
.ant-select-selector, |
|||
.ant-picker, |
|||
.ant-input { |
|||
background-color: var(--color-search-list-item-bg) !important; |
|||
box-shadow: none !important; |
|||
color: var(--color-search-list-item-value); |
|||
border-color: var(--color-search-list-item-bd) !important; |
|||
} |
|||
} |
|||
.paid-result { |
|||
width: calc(100% - 375px); |
|||
padding-bottom: 15px; |
|||
padding: 20px; |
|||
background: var(--color-user-list-bg); |
|||
border-top-left-radius: 20px; |
|||
box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.08); |
|||
.result { |
|||
height: 100%; |
|||
display: flex; |
|||
flex-direction: column; |
|||
.row-head { |
|||
height: 32px; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
margin-bottom: 13px; |
|||
} |
|||
.result-data { |
|||
width: 100%; |
|||
height: calc(100% - 45px - 60px); |
|||
.table { |
|||
width: 100%; |
|||
.ant-table-body { |
|||
@include scrollBar(var(--color-user-list-bg), #3B97FF); |
|||
|
|||
} |
|||
.ant-table-thead { |
|||
th { |
|||
// padding: 0px 16px; |
|||
height: 50px; |
|||
} |
|||
|
|||
.ant-table-cell { |
|||
background: var(--color-table-header-bg) !important; |
|||
font-weight: 700; |
|||
|
|||
&::before { |
|||
display: none; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.ant-table-tbody { |
|||
tr { |
|||
&:nth-child(2n) { |
|||
td { |
|||
background: #3E4557 !important; |
|||
} |
|||
} |
|||
|
|||
&:hover { |
|||
td { |
|||
background: #3E4557 !important; |
|||
} |
|||
} |
|||
|
|||
td { |
|||
background: #3E4557 !important; |
|||
// border-bottom-color: #f2f2f2; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.ant-pagination-options { |
|||
.ant-select { |
|||
&:hover { |
|||
.ant-select-selector { |
|||
border-color: #f5f6f9; |
|||
box-shadow: none; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.ant-select-selector { |
|||
border-color: #f5f6f9; |
|||
} |
|||
|
|||
.ant-select-focused { |
|||
.ant-select-selector { |
|||
box-shadow: none !important; |
|||
border-color: #f5f6f9 !important; |
|||
} |
|||
} |
|||
|
|||
.ant-pagination-options-quick-jumper { |
|||
input { |
|||
background: #3E4557; |
|||
border-color: #f5f6f9; |
|||
|
|||
&:focus { |
|||
box-shadow: none; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
.ant-table-cell-fix-left, .ant-table-cell-fix-right { |
|||
z-index: 2; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.start-exception-deal-cascader { |
|||
.ant-cascader-menu-item-active { |
|||
background-color: var(--color-tag-bg) !important; |
|||
} |
|||
} |
|||
|
|||
.start-exception-deal-operate { |
|||
.ant-popover-inner-content { |
|||
padding: 5px 5px; |
|||
width: 100%; |
|||
.hover, |
|||
.disabled { |
|||
padding: 5px 12px; |
|||
text-align: center; |
|||
} |
|||
.hover { |
|||
&:hover { |
|||
background-color: #414960; |
|||
} |
|||
} |
|||
.disabled { |
|||
cursor: no-drop; |
|||
color: rgba(255, 255, 255, .3); |
|||
} |
|||
} |
|||
} |
|||
@ -1,15 +1,456 @@ |
|||
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 { message, Pagination, Table, Select, Input, Cascader, DatePicker, Button, Popover } from "antd"; |
|||
import { dictionary, utils } from "@/config/common"; |
|||
import moment from "moment"; |
|||
import { useSessionStorageState, useUpdateEffect } from "ahooks"; |
|||
import ajax from "@/services"; |
|||
import { QuickMenu, ParkingRecordModal } from "@/components"; |
|||
import "./index.scss"; |
|||
import errorImg from "@/assets/images/layout/error.png"; |
|||
import { useLocation } from "react-router-dom"; |
|||
function DealRecordList() { |
|||
return <div>DealRecordList</div> |
|||
// 默认数据 |
|||
const defaultData = { |
|||
park_id: "", // 停车订单ID |
|||
operator: 0, // 商户名称 |
|||
region: [0], // 区域 |
|||
road: "", // 车场名称 |
|||
road_type: 0, // 车场类型 |
|||
plate: "", // 车牌号 |
|||
type: 1, // 出入场类型 1: 入场 2: 出场 |
|||
start_time: moment().subtract(7, "days").startOf("day").format("YYYY-MM-DD HH:mm:ss"), // 开始时间 |
|||
end_time: moment().format("YYYY-MM-DD HH:mm:ss"), // 结束时间 |
|||
pn: 1, |
|||
page_size: dictionary?.pageSizeOptions1[0] |
|||
}; |
|||
|
|||
const [formData, setFormData] = useState(defaultData); // 表单数据 |
|||
const [operatorList, setOperatorList] = useState([{ value: 0, label: "全部" }]); //商户名称 |
|||
const [areaList, setAreaList] = useState([]); //区域的下拉数据 |
|||
const [loading, setLoading] = useState(false); // 检索按钮加载状态 |
|||
const [tableSelectCheck, setTableSelectCheck] = useState([]); // 列表选中的停车订单id |
|||
const [parkingRecordModal, setParkingRecordModal] = useState({ open: false, tableData: {} }); // 详情弹框 |
|||
|
|||
// 表格返回数据 |
|||
const [resultData, setResultData] = useState({ |
|||
total: 0, |
|||
list: [], |
|||
}); |
|||
|
|||
//列表 |
|||
const tableColumns = [ |
|||
{ |
|||
title: "序号", |
|||
width: 60, |
|||
align: "center", |
|||
fixed: 'left', |
|||
render: (text, record, index) => index + 1, |
|||
}, |
|||
{ |
|||
title: "处理记录ID", |
|||
dataIndex: "deal_record_id", |
|||
key: "deal_record_id", |
|||
width: 200, |
|||
align: "center", |
|||
fixed: 'left', |
|||
render: (text) => ( |
|||
<> |
|||
<a onClick={() => { |
|||
navigator.clipboard.writeText(`${text}`).then(() => { message.success("已复制到剪切板") }); |
|||
}}>{text}</a> |
|||
</> |
|||
), |
|||
}, |
|||
{ |
|||
title: "发起时间", |
|||
dataIndex: "deal_time", |
|||
key: "deal_time", |
|||
align: "center", |
|||
width: 150, |
|||
}, |
|||
{ |
|||
title: "处理人", |
|||
dataIndex: "dealer", |
|||
key: "dealer", |
|||
align: "center", |
|||
width: 150, |
|||
}, |
|||
{ |
|||
title: "业务订单类型", |
|||
dataIndex: "business_type", |
|||
key: "business_type", |
|||
align: "center", |
|||
width: 150, |
|||
}, |
|||
{ |
|||
title: "业务订单ID", |
|||
dataIndex: "park_id", |
|||
key: "park_id", |
|||
align: "center", |
|||
width: 150, |
|||
}, |
|||
{ |
|||
title: "更改项", |
|||
dataIndex: "change_content", |
|||
key: "change_content", |
|||
align: "center", |
|||
width: 150, |
|||
render: (text, record, index) => { |
|||
let content = '' |
|||
switch (text) { |
|||
case 1: |
|||
content = "调整出场时间" |
|||
break; |
|||
case 2: |
|||
content = "变更车牌号" |
|||
break; |
|||
case 3: |
|||
content = "更改订单金额" |
|||
break; |
|||
case 4: |
|||
content = "免费该订单" |
|||
break; |
|||
case 5: |
|||
content = "作废该订单" |
|||
break; |
|||
default: |
|||
break; |
|||
} |
|||
return <>{content}</> |
|||
}, |
|||
}, |
|||
{ |
|||
title: "更改项初始值", |
|||
dataIndex: "initial_value", |
|||
key: "initial_value", |
|||
align: "center", |
|||
width: 150, |
|||
}, |
|||
{ |
|||
title: "更改项更新值", |
|||
dataIndex: "update_value", |
|||
key: "update_value", |
|||
align: "center", |
|||
width: 150, |
|||
}, |
|||
{ |
|||
title: '操作', |
|||
key: 'operation', |
|||
dataIndex: 'operation', |
|||
align: "center", |
|||
fixed: 'right', |
|||
width: 100, |
|||
render: (text, record, index) => { |
|||
return <> |
|||
<Popover |
|||
overlayClassName="start-exception-deal-operate" |
|||
content={ |
|||
<div className="operateBtn operate-btn" style={{ cursor: "pointer" }} trigger="hover"> |
|||
<div className="hover" onClick={() => { setParkingRecordModal({ open: true, tableData: record || {} }) }}>查看</div> |
|||
{record?.status_now == 2 ? |
|||
<div className="disabled">处理中</div> : |
|||
<div className="hover" onClick={() => { console.log("处理"); }}>处理</div> |
|||
} |
|||
</div> |
|||
} |
|||
> |
|||
<Button type="primary">操作</Button> |
|||
</Popover> |
|||
</> |
|||
}, |
|||
}, |
|||
]; |
|||
|
|||
// 批量处理 |
|||
const $batchProcessing = () => { |
|||
if (!tableSelectCheck?.length) return message.error("请选择需要处理的数据！"); |
|||
console.log(tableSelectCheck); |
|||
}; |
|||
|
|||
// 分页 |
|||
const $changePn = (pn, page_size) => { |
|||
let temFormData = {}; |
|||
if (formData.page_size == page_size) { |
|||
temFormData = { |
|||
...formData, |
|||
pn |
|||
}; |
|||
} else { |
|||
temFormData = { |
|||
...formData, |
|||
pn: 1, |
|||
page_size, |
|||
}; |
|||
}; |
|||
setFormData(temFormData); |
|||
$getTableList(temFormData); |
|||
}; |
|||
|
|||
// 获取商户名称 |
|||
const $getAllOperator = () => { |
|||
ajax |
|||
.getAllOperator() |
|||
.then((res) => { |
|||
if (res.status === 20000 || res.status == 0) { |
|||
setOperatorList(res.data || { value: 0, label: "全部" }); |
|||
} else { |
|||
message.error(res.message); |
|||
} |
|||
}) |
|||
.catch((error) => { |
|||
message.error(error.message); |
|||
}); |
|||
}; |
|||
|
|||
// 获取区域树结构 |
|||
const $getAreaList = () => { |
|||
ajax |
|||
.getAreaTree() |
|||
.then((res) => { |
|||
if (res.status === 20000 || res.status == 0) { |
|||
setAreaList( |
|||
res.data || [{ name: "全部", id: 0, level: 1, children: [] }] |
|||
); |
|||
} else { |
|||
message.error(res.message); |
|||
} |
|||
}) |
|||
.catch((error) => { |
|||
message.error(error.message); |
|||
}); |
|||
}; |
|||
|
|||
// 获取表格数据 |
|||
const $getTableList = (value = {}) => { |
|||
setTableSelectCheck([]); // 清空表格选中项 |
|||
let _data = { |
|||
...formData, |
|||
...value |
|||
}; |
|||
setLoading(true); |
|||
ajax.getDealRecordListTableData(_data).then((res) => { |
|||
setLoading(false); |
|||
if (res.status === 20000 || res.status == 0) { |
|||
setResultData(res?.data || {}); |
|||
} else { |
|||
message.error(res.message); |
|||
} |
|||
}).catch((error) => { |
|||
setLoading(false); |
|||
message.error(error.message); |
|||
}); |
|||
}; |
|||
|
|||
useEffect(() => { |
|||
$getAllOperator(); |
|||
$getAreaList(); |
|||
$getTableList(); |
|||
}, []); |
|||
return ( |
|||
<div className="start-exception-deal"> |
|||
<div className="paid-search"> |
|||
<div className="title">查询条件</div> |
|||
<div className="form-Wrap"> |
|||
<div className="yisa-search"> |
|||
<label>处理记录ID</label> |
|||
<Input |
|||
className="form-con" |
|||
placeholder="请输入处理记录ID" |
|||
value={formData?.deal_record_id} |
|||
allowClear |
|||
onChange={(e) => |
|||
setFormData({ ...formData, deal_record_id: e.target.value || "" }) |
|||
} |
|||
/> |
|||
</div> |
|||
<div className="yisa-search"> |
|||
<label>业务订单类型</label> |
|||
<Select |
|||
className="form-con" |
|||
placeholder="请选择" |
|||
options={[ |
|||
{ |
|||
label: "全部", |
|||
value: -1, |
|||
}, |
|||
|
|||
]} |
|||
value={formData.business_type} |
|||
onChange={(v) => setFormData({ ...formData, business_type: v })} |
|||
/> |
|||
</div> |
|||
<div className="yisa-search"> |
|||
<label>业务订单ID</label> |
|||
<Input |
|||
className="form-con" |
|||
placeholder="请输入业务订单ID" |
|||
value={formData?.park_id} |
|||
allowClear |
|||
onChange={(e) => |
|||
setFormData({ ...formData, park_id: e.target.value || "" }) |
|||
} |
|||
/> |
|||
</div> |
|||
<div className="yisa-search"> |
|||
<label>时间段</label> |
|||
<DatePicker |
|||
className="form-con" |
|||
showTime |
|||
format={"YYYY-MM-DD HH:mm:ss"} |
|||
value={moment(formData.start_time)} |
|||
disabledDate={(current) => current > moment(formData.end_time)} |
|||
onChange={(date, time) => { |
|||
setFormData({ ...formData, start_time: time || null }) |
|||
}} |
|||
/> |
|||
</div> |
|||
<div className="yisa-search" style={{ marginBottom: "0" }}> |
|||
<label>至</label> |
|||
<DatePicker |
|||
className="form-con" |
|||
showTime |
|||
format={"YYYY-MM-DD HH:mm:ss"} |
|||
value={moment(formData.end_time)} |
|||
disabledDate={(current) => current < moment(formData.start_time)} |
|||
onChange={(date, time) => { |
|||
setFormData({ ...formData, end_time: time || null }) |
|||
}} |
|||
/> |
|||
</div> |
|||
<div className="yisa-search"> |
|||
<label></label> |
|||
<QuickMenu |
|||
dropdownData={[ |
|||
{ text: '昨日', value: 1 }, |
|||
{ text: '近30天', value: 30 }, |
|||
{ text: '近90天', value: 90 }, |
|||
{ text: '近180天', value: 180 } |
|||
]} |
|||
onChange={(v) => { |
|||
let plate = formData?.plateNumber || ""; |
|||
let value = v?.value || 0; |
|||
if (plate) { |
|||
console.log(utils?.validationPlate(plate)) |
|||
if (utils?.validationPlate(plate)) { |
|||
setFormData({ |
|||
...formData, |
|||
end_time: v?.endDateTime || null, |
|||
start_time: v?.startDateTime || null, |
|||
}) |
|||
} else { |
|||
message.error('请正确输入车牌号') |
|||
return |
|||
} |
|||
} else { |
|||
if (value > 30) return message.warning("请输入您查询的车牌号！"); |
|||
} |
|||
setFormData({ |
|||
...formData, |
|||
end_time: v?.endDateTime || null, |
|||
start_time: v?.startDateTime || null, |
|||
}) |
|||
}} |
|||
/> |
|||
</div> |
|||
<div className="yisa-search"> |
|||
<label>状态</label> |
|||
<Select |
|||
className="form-con" |
|||
placeholder="请选择" |
|||
options={[ |
|||
{ |
|||
label: "全部", |
|||
value: -1, |
|||
}, |
|||
{ |
|||
label: "待审核", |
|||
value: 1, |
|||
}, |
|||
{ |
|||
label: "已完成", |
|||
value: 2, |
|||
}, |
|||
{ |
|||
label: "已驳回", |
|||
value: 3, |
|||
}, |
|||
]} |
|||
value={formData.status} |
|||
onChange={(v) => setFormData({ ...formData, status: v })} |
|||
/> |
|||
</div> |
|||
<div className="form-btn"> |
|||
<Button |
|||
className="reset" |
|||
onClick={() => setFormData({ ...defaultData, pn: formData?.pn || 1, page_size: formData?.page_size || dictionary?.pageSizeOptions1[0] })} |
|||
> |
|||
重置 |
|||
</Button> |
|||
<Button |
|||
className="submit" |
|||
type="primary" |
|||
onClick={() => { |
|||
let _data = { |
|||
...formData, |
|||
pn: 1, |
|||
page_size: dictionary?.pageSizeOptions1[0] |
|||
} |
|||
setFormData(_data) |
|||
$getTableList(_data) |
|||
}} |
|||
loading={loading} |
|||
> |
|||
查询 |
|||
</Button> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div className="paid-result"> |
|||
<div className="result"> |
|||
<div className="row-head"> |
|||
<span className="number-wrapper">处理记录列表</span> |
|||
</div> |
|||
<div className="result-data"> |
|||
<Table |
|||
rowKey={(row) => row.park_id} |
|||
className="table" |
|||
dataSource={resultData?.list || []} |
|||
columns={tableColumns} |
|||
pagination={false} |
|||
loading={loading} |
|||
// rowSelection={{ |
|||
// selectedRowKeys: tableSelectCheck, |
|||
// onChange: (selectedRowKeys, selectedRows) => { |
|||
// console.log(selectedRowKeys, selectedRows); |
|||
// setTableSelectCheck(selectedRowKeys) |
|||
// }, |
|||
// getCheckboxProps: (record) => ({ |
|||
// disabled: record?.status_now == 2 |
|||
// }) |
|||
// }} |
|||
scroll={{ x: "1500", y: "calc(100vh - 310px)" }} |
|||
/> |
|||
<Pagination |
|||
className="pagination-common" |
|||
showSizeChanger={true} |
|||
showQuickJumper={true} |
|||
showTotal={() => `共 ${resultData.total || 0} 条`} |
|||
total={resultData.total} |
|||
current={formData.pn} |
|||
pageSize={formData.page_size} |
|||
pageSizeOptions={dictionary?.pageSizeOptions1} |
|||
onChange={$changePn} |
|||
/> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<ParkingRecordModal |
|||
title={parkingRecordModal?.tableData?.road || null} |
|||
{...parkingRecordModal} |
|||
onCancel={() => { setParkingRecordModal({ open: false, tableData: {} }) }} |
|||
/> |
|||
</div> |
|||
); |
|||
} |
|||
|
|||
export default DealRecordList; |
|||
@ -1,5 +1,209 @@ |
|||
@import "@/assets/css/mixin.scss"; |
|||
$color-container-bg : var(--color-container-bg); |
|||
$color-user-list-bg : var(--color-user-list-bg); |
|||
$color-text : var(--color-text); |
|||
$color-primary : var(--color-primary); |
|||
$color-container-bg: var(--color-container-bg); |
|||
$color-user-list-bg: var(--color-user-list-bg); |
|||
$color-text: var(--color-text); |
|||
$color-primary: var(--color-primary); |
|||
|
|||
.start-exception-deal { |
|||
display: flex; |
|||
padding-top: 10px; |
|||
width: 100%; |
|||
height: 100%; |
|||
.paid-search { |
|||
display: block; |
|||
width: 375px; |
|||
padding: 10px 10px 20px 20px; |
|||
.title { |
|||
width: 100%; |
|||
font-size: 16px; |
|||
font-family: Microsoft YaHei, Microsoft YaHei-Bold; |
|||
font-weight: 700; |
|||
text-align: left; |
|||
color: var(--color-text); |
|||
margin-bottom: 20px; |
|||
} |
|||
.form-Wrap { |
|||
height: calc(100% - 45px); |
|||
overflow-y: auto; |
|||
scrollbar-width: none; |
|||
-ms-overflow-style: none; |
|||
|
|||
&::-webkit-scrollbar { |
|||
display: none; |
|||
} |
|||
} |
|||
.yisa-search { |
|||
width: 100%; |
|||
display: flex; |
|||
align-items: center; |
|||
margin-bottom: 24px; |
|||
|
|||
label { |
|||
color: var(--color-search-list-item-text); |
|||
flex: 0 0 25%; |
|||
max-width: 25%; |
|||
text-align: right; |
|||
padding-right: 8px; |
|||
} |
|||
|
|||
.form-con { |
|||
flex: 1; |
|||
width: 220px; |
|||
} |
|||
} |
|||
.form-btn { |
|||
display: flex; |
|||
flex-flow: row nowrap; |
|||
padding: 0 10px; |
|||
justify-content: space-between; |
|||
.reset { |
|||
width: 90px; |
|||
height: 36px; |
|||
border-radius: 4px; |
|||
} |
|||
.submit { |
|||
width: calc(100% - 100px); |
|||
height: 36px; |
|||
border-radius: 4px; |
|||
} |
|||
} |
|||
.ant-select-selector, |
|||
.ant-picker, |
|||
.ant-input { |
|||
background-color: var(--color-search-list-item-bg) !important; |
|||
box-shadow: none !important; |
|||
color: var(--color-search-list-item-value); |
|||
border-color: var(--color-search-list-item-bd) !important; |
|||
} |
|||
} |
|||
.paid-result { |
|||
width: calc(100% - 375px); |
|||
padding-bottom: 15px; |
|||
padding: 20px; |
|||
background: var(--color-user-list-bg); |
|||
border-top-left-radius: 20px; |
|||
box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.08); |
|||
.result { |
|||
height: 100%; |
|||
display: flex; |
|||
flex-direction: column; |
|||
.row-head { |
|||
height: 32px; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
margin-bottom: 13px; |
|||
} |
|||
.result-data { |
|||
width: 100%; |
|||
height: calc(100% - 45px - 60px); |
|||
.table { |
|||
width: 100%; |
|||
.ant-table-body { |
|||
@include scrollBar(var(--color-user-list-bg), #3B97FF); |
|||
|
|||
} |
|||
.ant-table-thead { |
|||
th { |
|||
// padding: 0px 16px; |
|||
height: 50px; |
|||
} |
|||
|
|||
.ant-table-cell { |
|||
background: var(--color-table-header-bg) !important; |
|||
font-weight: 700; |
|||
|
|||
&::before { |
|||
display: none; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.ant-table-tbody { |
|||
tr { |
|||
&:nth-child(2n) { |
|||
td { |
|||
background: #3E4557 !important; |
|||
} |
|||
} |
|||
|
|||
&:hover { |
|||
td { |
|||
background: #3E4557 !important; |
|||
} |
|||
} |
|||
|
|||
td { |
|||
background: #3E4557 !important; |
|||
// border-bottom-color: #f2f2f2; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.ant-pagination-options { |
|||
.ant-select { |
|||
&:hover { |
|||
.ant-select-selector { |
|||
border-color: #f5f6f9; |
|||
box-shadow: none; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.ant-select-selector { |
|||
border-color: #f5f6f9; |
|||
} |
|||
|
|||
.ant-select-focused { |
|||
.ant-select-selector { |
|||
box-shadow: none !important; |
|||
border-color: #f5f6f9 !important; |
|||
} |
|||
} |
|||
|
|||
.ant-pagination-options-quick-jumper { |
|||
input { |
|||
background: #3E4557; |
|||
border-color: #f5f6f9; |
|||
|
|||
&:focus { |
|||
box-shadow: none; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
.ant-table-cell-fix-left, .ant-table-cell-fix-right { |
|||
z-index: 2; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.start-exception-deal-cascader { |
|||
.ant-cascader-menu-item-active { |
|||
background-color: var(--color-tag-bg) !important; |
|||
} |
|||
} |
|||
|
|||
.start-exception-deal-operate { |
|||
.ant-popover-inner-content { |
|||
padding: 5px 5px; |
|||
width: 100%; |
|||
.hover, |
|||
.disabled { |
|||
padding: 5px 12px; |
|||
text-align: center; |
|||
} |
|||
.hover { |
|||
&:hover { |
|||
background-color: #414960; |
|||
} |
|||
} |
|||
.disabled { |
|||
cursor: no-drop; |
|||
color: rgba(255, 255, 255, .3); |
|||
} |
|||
} |
|||
} |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue