Browse Source
Merge branch 'develop' of http://120.27.195.166:3000/chenglb/PMS_Frontend_v1.0.0 into develop
tags/PMS_Frontend_v1.0.6-develop
Merge branch 'develop' of http://120.27.195.166:3000/chenglb/PMS_Frontend_v1.0.0 into develop
tags/PMS_Frontend_v1.0.6-develop
23 changed files with 2018 additions and 294 deletions
-
10src/assets/css/base.scss
-
195src/components/ParkingRecordModal/RecordReviewModal.jsx
-
122src/components/ParkingRecordModal/VehicleInformation.jsx
-
183src/components/ParkingRecordModal/dataSource.js
-
260src/components/ParkingRecordModal/index.jsx
-
290src/components/ParkingRecordModal/index.scss
-
15src/components/QuickMenu/index.jsx
-
4src/components/index.jsx
-
4src/components/layout/Header/index.jsx
-
1src/config/character.config.js
-
367src/pages/FinancialMgm/ExceptionDeal/StartExceptionDeal/index.jsx
-
195src/pages/FinancialMgm/ExceptionDeal/StartExceptionDeal/index.scss
-
4src/pages/FinancialMgm/SettleBill/GeneralBusiness/loadable.jsx
-
112src/pages/MerchantMgm/InvoiceConf/loadable.jsx
-
14src/pages/MerchantMgm/MerchantInfo/loadable.jsx
-
1src/pages/SystemMgm/AdminMgm/index.scss
-
89src/pages/SystemMgm/AdminMgm/loadable.jsx
-
8src/pages/SystemMgm/AreaManage/ModalAreaAdd/index.jsx
-
50src/pages/SystemMgm/AreaManage/loadable.jsx
-
37src/pages/SystemMgm/BusinessConfig/BusinessConf/loadable.jsx
-
31src/pages/SystemMgm/RoleMgm/loadable.jsx
-
52src/services/FinancialMgm/exceptionDeal.js
-
2src/services/system.js
@ -0,0 +1,195 @@ |
|||
import React, { useState, useRef, useEffect } from "react"; |
|||
import { Modal, Tabs, Table, message, Button, Input, Select } from "antd"; |
|||
import { RightOutlined, DownOutlined } from "@ant-design/icons"; |
|||
import { dictionary, utils } from "@/config/common"; |
|||
import VehicleInformation from "./VehicleInformation"; |
|||
import { payRecordColumns, refundRecordColumns, operatorRecordColumns } from "./dataSource"; |
|||
import moment from "moment"; |
|||
import ajax from "@/services"; |
|||
import "./index.scss"; |
|||
const { TextArea } = Input; |
|||
const RecordReviewModal = (props) => { |
|||
const { |
|||
className = "", |
|||
title = null, // 头部 |
|||
open = false, |
|||
data = [], |
|||
disabledModal = false, // 查看或提交 |
|||
onCancel, |
|||
} = props; |
|||
|
|||
// 表头 |
|||
const columns = [ |
|||
{ |
|||
title: "停车订单ID", |
|||
dataIndex: "park_id", |
|||
key: "park_id", |
|||
width: 200, |
|||
align: "center", |
|||
fixed: 'left', |
|||
render: (text) => ( |
|||
<> |
|||
<a onClick={() => { |
|||
navigator.clipboard.writeText(`${text}`).then(() => { message.success("已复制到剪切板") }); |
|||
}}>{text}</a> |
|||
</> |
|||
), |
|||
}, |
|||
{ |
|||
title: "车牌号", |
|||
dataIndex: "plateNumber", |
|||
key: "plateNumber", |
|||
align: "center", |
|||
}, |
|||
{ |
|||
title: "停车场名称", |
|||
dataIndex: "parkName", |
|||
key: "parkName", |
|||
align: "center", |
|||
}, |
|||
{ |
|||
title: "入场时间", |
|||
dataIndex: "strEntryTime", |
|||
key: "strEntryTime", |
|||
align: "center", |
|||
}, |
|||
{ |
|||
title: "出场时间", |
|||
dataIndex: "strExitTime", |
|||
key: "strExitTime", |
|||
align: "center", |
|||
}, |
|||
]; |
|||
const [modalVisible, setModalVisible] = useState(false); // 模态框显示隐藏 |
|||
const [resultData, setResultData] = useState([]); // 数据 |
|||
const [expandedRowKeys, setExpandedRowKeys] = useState([0]); // 默认展开的列表数据 |
|||
|
|||
// 关闭模态框 |
|||
const $onCancelModal = () => { |
|||
if (onCancel) onCancel(false); |
|||
setResultData([]); |
|||
setExpandedRowKeys([0]); |
|||
} |
|||
useEffect(() => { |
|||
setModalVisible(open) |
|||
}, [open]); |
|||
|
|||
useEffect(() => { |
|||
if (data?.length) { |
|||
let _data = []; |
|||
data.map((item, index) => { |
|||
let value = { |
|||
...item, |
|||
key: index, |
|||
road: item?.parkName || "", |
|||
region: item?.areaName || "", |
|||
operator: item?.operationName || "", |
|||
berth_id: item?.berthCode, |
|||
road_type: item?.parkTypeName || "", |
|||
} |
|||
_data.push({ |
|||
...value, |
|||
description: <VehicleInformation className="abnormal-order--table-content" data={value} type="2" /> |
|||
}) |
|||
}); |
|||
setResultData(_data); |
|||
}; |
|||
}, [data]) |
|||
return ( |
|||
<Modal |
|||
className={`parking-record-modal ${className}`} |
|||
title={title} |
|||
open={modalVisible} |
|||
onCancel={$onCancelModal} |
|||
destroyOnClose={true} |
|||
footer={null} |
|||
> |
|||
<div className="item-title">停车订单详情</div> |
|||
<Table |
|||
className="table" |
|||
columns={columns} |
|||
dataSource={resultData} |
|||
scroll={{ y: 400 }} |
|||
pagination={false} |
|||
expandable={{ |
|||
expandedRowRender: (record) => <>{record.description}</>, |
|||
expandedRowKeys, |
|||
expandIcon: ({ expanded, onExpand, record }) => |
|||
expanded ? ( |
|||
<DownOutlined onClick={e => { onExpand(record, e); setExpandedRowKeys([]) }} /> |
|||
) : ( |
|||
<RightOutlined onClick={e => { onExpand(record, e); setExpandedRowKeys([record?.key]) }} /> |
|||
) |
|||
}} |
|||
/> |
|||
{disabledModal ? |
|||
<div className="process-view"> |
|||
<div className="item-title">流程查看 <span>查看全部</span></div> |
|||
<div className="item-content"> |
|||
<div className="start"> |
|||
<span className="num">1</span> |
|||
<span>发起处理</span> |
|||
<span>哈哈哈 2023-10-26 18:08:48</span> |
|||
</div> |
|||
<div className="centre">已完成</div> |
|||
<div className="end"> |
|||
<span className="num">2</span> |
|||
<span>发起处理</span> |
|||
<span>哈哈哈 2023-10-26 18:08:48</span> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
: null |
|||
} |
|||
<div className="order-text"> |
|||
<div className="item-title">异常订单处理</div> |
|||
<span><em>*</em>处理理由</span> |
|||
<TextArea |
|||
maxLength={100} |
|||
showCount |
|||
placeholder="请输入处理理由" |
|||
defaultValue={disabledModal ? resultData?.[0]?.deal_reason : null} |
|||
disabled={disabledModal} |
|||
onChange={(e) => { console.log(e.target.value); }} |
|||
/> |
|||
</div> |
|||
<div className="process-mode"> |
|||
<div className="item-title">处理方式</div> |
|||
<div className="yisa-search"> |
|||
<label><em>*</em>更改项</label> |
|||
<Select |
|||
style={{ width: 200 }} |
|||
placeholder="请选择更改项" |
|||
// value={submitDeploy.adviseType} |
|||
options={[ |
|||
{ |
|||
value: 1, |
|||
label: '调整出场时间' |
|||
}, |
|||
{ |
|||
value: 2, |
|||
label: '变更车牌号' |
|||
}, |
|||
{ |
|||
value: 3, |
|||
label: '变更订单金额' |
|||
}, |
|||
{ |
|||
value: 4, |
|||
label: '免费该订单' |
|||
}, |
|||
{ |
|||
value: 5, |
|||
label: '作废该订单' |
|||
} |
|||
]} |
|||
onChange={() => {}} |
|||
/> |
|||
|
|||
</div> |
|||
</div> |
|||
</Modal> |
|||
); |
|||
} |
|||
|
|||
export default RecordReviewModal; |
|||
@ -0,0 +1,122 @@ |
|||
import React, { useState, useRef, useEffect } from "react"; |
|||
import { dictionary, utils } from "@/config/common"; |
|||
import { Image } from 'antd'; |
|||
import { ImgError } from "@/components" |
|||
import errorImg from '@/assets/images/layout/error.png' |
|||
import "./index.scss"; |
|||
const VehicleInformation = (props) => { |
|||
const { |
|||
className = "", |
|||
data = {}, |
|||
type = "1", // "1": 停车记录信息 "2": 异常订单处理记录审核 |
|||
} = props |
|||
const [carImgPreview, setCarImgPreview] = useState(true); // 车辆图片加载失败禁止预览 |
|||
const [plateImgPreview, setPlateImgPreview] = useState(true); // 车牌图片加载失败禁止预览 |
|||
return ( |
|||
<div className={`vehicle-information-modal ${className}`}> |
|||
<div className="park"> |
|||
<div className="title"><span>{type == "1" ? "停车场信息" : "车场详情"}</span><span className="line"></span></div> |
|||
{<div className="content"> |
|||
<div className="item"><span>停车场名称</span><span title={data?.road || "--"}>{data?.road || "--"}</span></div> |
|||
<div className="item"><span>泊位号</span><span title={data?.berth_id}>{data?.berth_id || "--"}</span></div> |
|||
<div className="item"><span>区域</span><span title={data?.region}>{data?.region || "--"}</span></div> |
|||
<div className="item"><span>{type == "1" ? "商户" : "商户名称"}</span><span title={data?.operator}>{data?.operator || "--"}</span></div> |
|||
<div className="item"><span>车场类型</span><span title={data?.road_type}>{data?.road_type || "--"}</span></div> |
|||
</div>} |
|||
</div> |
|||
{type == "1" ? |
|||
<div className="car"> |
|||
<div className="title"><span>停车信息</span><span className="line"></span></div> |
|||
<div className="content"> |
|||
<div className="item"><span>车牌号</span><span title={data?.plate || "--"}>{data?.plate || "--"}</span></div> |
|||
<div className="item"><span>会员手机</span><span title={data?.phone || "--"}>{data?.phone || "--"}</span></div> |
|||
<div className="item"><span>入场时间</span><span title={data?.in_time || "--"}>{data?.in_time || "--"}</span></div> |
|||
<div className="item"><span>出场时间</span><span title={data?.out_time || "--"}>{data?.out_time || "--"}</span></div> |
|||
<div className="item"><span>停车时长</span><span title={data?.admission_time || "--"}>{data?.admission_time || "--"}</span></div> |
|||
<div className="item"><span>订单金额</span><span title={data?.order_amount || "--"}>{data?.order_amount || "--"}</span></div> |
|||
<div className="item"><span>停车卡抵扣</span><span title={data?.parking_card_discount || "--"}>{data?.parking_card_discount || "--"}</span></div> |
|||
<div className="item"><span>车场折扣</span><span title={data?.road_discount || "--"}>{data?.road_discount || "--"}</span></div> |
|||
<div className="item"><span>应收金额</span><span title={data?.receivable_amount || "--"}>{data?.receivable_amount || "--"}</span></div> |
|||
<div className="item"><span>优惠券</span><span title={data?.preferential_amount || "--"}>{data?.preferential_amount || "--"}</span></div> |
|||
<div className="item"><span>优惠总计</span><span title={data?.preferential_total || "--"}>{data?.preferential_total || "--"}</span></div> |
|||
<div className="item"><span>实付金额</span><span title={data?.actual_amount || "--"}>{data?.actual_amount || "--"}</span></div> |
|||
<div className="item"><span>优惠退款</span><span title={data?.refund_discount || "--"}>{data?.refund_discount || "--"}</span></div> |
|||
<div className="item"><span>实付退款</span><span title={data?.actual_refund || "--"}>{data?.actual_refund || "--"}</span></div> |
|||
<div className="item"><span>退款总计</span><span title={data?.refund_total || "--"}>{data?.refund_total || "--"}</span></div> |
|||
<div className="item"><span>入场收费员</span><span title={data?.in_person || "--"}>{data?.in_person || "--"}</span></div> |
|||
<div className="item"><span>出场收费员</span><span title={data?.out_person || "--"}>{data?.out_person || "--"}</span></div> |
|||
</div> |
|||
</div> |
|||
: null |
|||
} |
|||
{type == "2" ? |
|||
<div className="car"> |
|||
<div className="title"><span>车辆详情</span><span className="line"></span></div> |
|||
<div className="content"> |
|||
<div className="item"><span>车牌号</span><span title={data?.plateNumber || "--"}>{data?.plateNumber || "--"}</span></div> |
|||
<div className="item"><span>停车时长</span><span title={data?.parkTime || "--"}>{data?.parkTime || "--"}</span></div> |
|||
<div className="item"><span>入场时间</span><span title={data?.strEntryTime || "--"}>{data?.strEntryTime || "--"}</span></div> |
|||
<div className="item"><span>出场时间</span><span title={data?.strExitTime || "--"}>{data?.strExitTime || "--"}</span></div> |
|||
<div className="item"><span>入场记录来源</span><span title={data?.entryDataSourceName || "--"}>{data?.entryDataSourceName || "--"}</span></div> |
|||
<div className="item"><span>出场记录来源</span><span title={data?.exitDataSourceName || "--"}>{data?.exitDataSourceName || "--"}</span></div> |
|||
<div className="item"><span>出入场图像</span><span>查看</span></div> |
|||
</div> |
|||
</div> |
|||
: null |
|||
} |
|||
{type == "2" ? |
|||
<div className="car"> |
|||
<div className="title"><span>订单详情</span><span className="line"></span></div> |
|||
<div className="content"> |
|||
<div className="item"><span>订单金额</span><span title={data?.shouldPayMoney || "--"}>{data?.shouldPayMoney || "--"}</span></div> |
|||
<div className="item"><span>优惠总计</span><span title={data?.totalCoupon || "--"}>{data?.totalCoupon || "--"}</span></div> |
|||
<div className="item"><span>实付总计</span><span title={data?.totalPreMoney || "--"}>{data?.totalPreMoney || "--"}</span></div> |
|||
<div className="item"><span>欠费总计</span><span title={data?.sumActualPay || "--"}>{data?.sumActualPay || "--"}</span></div> |
|||
</div> |
|||
</div> |
|||
: null |
|||
|
|||
} |
|||
{type == "abnormalOrder" ? |
|||
<div className="car-img"> |
|||
<div className="title"><span>入场照片</span><span className="line"></span></div> |
|||
<div className="img-box"> |
|||
<div className="img-left"> |
|||
{data?.in_veh_pic ? |
|||
<div className="img-null"> |
|||
<Image |
|||
src={data?.in_veh_pic} |
|||
fallback={errorImg} |
|||
preview={carImgPreview} |
|||
onError={() => { setCarImgPreview(false) }} |
|||
/> |
|||
</div> |
|||
: |
|||
<div className="img-null">暂无车辆照片</div> |
|||
} |
|||
<span>车辆照片</span> |
|||
</div> |
|||
<div className="img-right"> |
|||
{data?.in_plate_pic ? |
|||
<div className="img-null"> |
|||
<Image |
|||
src={data?.in_plate_pic} |
|||
fallback={errorImg} |
|||
preview={plateImgPreview} |
|||
onError={() => { setPlateImgPreview(false) }} |
|||
/> |
|||
</div> |
|||
: |
|||
<div className="img-null">暂无车牌照片</div> |
|||
} |
|||
<span>车牌照片</span> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
: null |
|||
} |
|||
</div> |
|||
); |
|||
} |
|||
|
|||
export default VehicleInformation; |
|||
@ -0,0 +1,183 @@ |
|||
//用来存储表头的js文件
|
|||
import React from "react"; |
|||
import { Button } from "antd"; |
|||
//支付记录的表头
|
|||
export const payRecordColumns = [ |
|||
{ |
|||
title: "序号", |
|||
dataIndex: "id", |
|||
key: "id", |
|||
align: "center", |
|||
render: (text, record, index) => index + 1, |
|||
}, |
|||
{ |
|||
title: "订单ID", |
|||
dataIndex: "order_id", |
|||
key: "order_id", |
|||
align: "center", |
|||
}, |
|||
{ |
|||
title: "入场时间", |
|||
dataIndex: "admission_time", |
|||
key: "admission_time", |
|||
align: "center", |
|||
}, |
|||
{ |
|||
title: "计费时间", |
|||
dataIndex: "charging_time", |
|||
key: "charging_time", |
|||
align: "center", |
|||
}, |
|||
{ |
|||
title: "支付时间", |
|||
dataIndex: "pay_time", |
|||
key: "pay_time", |
|||
align: "center", |
|||
}, |
|||
{ |
|||
title: "应收金额", |
|||
dataIndex: "receivable_amount", |
|||
key: "receivable_amount", |
|||
align: "center", |
|||
}, |
|||
{ |
|||
title: "优惠金额", |
|||
dataIndex: "discount_amount", |
|||
key: "discount_amount", |
|||
align: "center", |
|||
}, |
|||
{ |
|||
title: "实付金额", |
|||
dataIndex: "paid_in_money", |
|||
key: "paid_in_money", |
|||
align: "center", |
|||
}, |
|||
{ |
|||
title: "支付类型", |
|||
dataIndex: "paymentType", |
|||
key: "paymentType", |
|||
align: "center", |
|||
}, |
|||
{ |
|||
title: "支付渠道", |
|||
dataIndex: "payment_channels", |
|||
key: "payment_channels", |
|||
align: "center", |
|||
}, |
|||
{ |
|||
title: "支付设备", |
|||
dataIndex: "payment_equipment", |
|||
key: "payment_equipment", |
|||
align: "center", |
|||
}, |
|||
{ |
|||
title: "支付人", |
|||
dataIndex: "pay_person", |
|||
key: "pay_person", |
|||
align: "center", |
|||
}, |
|||
{ |
|||
title: "付款路段", |
|||
dataIndex: "pay_road", |
|||
key: "pay_road", |
|||
align: "center", |
|||
}, |
|||
{ |
|||
title: "第三方流水ID", |
|||
dataIndex: "third_party_flow_id", |
|||
key: "third_party_flow_id", |
|||
align: "center", |
|||
}, |
|||
]; |
|||
//退款订单的表头
|
|||
export const refundRecordColumns = [ |
|||
{ |
|||
title: "序号", |
|||
dataIndex: "id", |
|||
key: "id", |
|||
align: "center", |
|||
render: (text, record, index) => index + 1, |
|||
}, |
|||
{ |
|||
title: "退款方式", |
|||
dataIndex: "refund_type", |
|||
key: "refund_type", |
|||
align: "center", |
|||
}, |
|||
{ |
|||
title: "支付渠道", |
|||
dataIndex: "pay_road", |
|||
key: "pay_road", |
|||
align: "center", |
|||
}, |
|||
{ |
|||
title: "支付设备", |
|||
dataIndex: "pay_time", |
|||
key: "pay_time", |
|||
align: "center", |
|||
}, |
|||
{ |
|||
title: "退款原因", |
|||
dataIndex: "reason", |
|||
key: "reason", |
|||
align: "center", |
|||
}, |
|||
{ |
|||
title: "退款金额", |
|||
dataIndex: "refund_amonut", |
|||
key: "refund_amonut", |
|||
align: "center", |
|||
}, |
|||
{ |
|||
title: "申请人", |
|||
dataIndex: "application_person", |
|||
key: "application_person", |
|||
align: "center", |
|||
}, |
|||
{ |
|||
title: "申请时间", |
|||
dataIndex: "application_time", |
|||
key: "application_time", |
|||
align: "center", |
|||
}, |
|||
{ |
|||
title: "退款时间", |
|||
dataIndex: "refund_time", |
|||
key: "refund_time", |
|||
align: "center", |
|||
}, |
|||
]; |
|||
//操作记录
|
|||
export const operatorRecordColumns = [ |
|||
{ |
|||
title: "序号", |
|||
dataIndex: "id", |
|||
key: "id", |
|||
align: "center", |
|||
render: (text, record, index) => index + 1, |
|||
}, |
|||
{ |
|||
title: "操作类型", |
|||
dataIndex: "type", |
|||
key: "type", |
|||
align: "center", |
|||
}, |
|||
{ |
|||
title: "操作来源", |
|||
dataIndex: "source", |
|||
key: "source", |
|||
align: "center", |
|||
}, |
|||
{ |
|||
title: "操作人/设备", |
|||
dataIndex: "object", |
|||
key: "object", |
|||
align: "center", |
|||
}, |
|||
{ |
|||
title: "操作时间", |
|||
dataIndex: "time", |
|||
key: "time", |
|||
align: "center", |
|||
}, |
|||
]; |
|||
@ -0,0 +1,260 @@ |
|||
import React, { useState, useRef, useEffect } from "react"; |
|||
import { Modal, Tabs, Table, message, Button } from "antd"; |
|||
import { dictionary, utils } from "@/config/common"; |
|||
import VehicleInformation from "./VehicleInformation"; |
|||
import RecordReviewModal from "./RecordReviewModal"; |
|||
import { payRecordColumns, refundRecordColumns, operatorRecordColumns } from "./dataSource"; |
|||
import moment from "moment"; |
|||
import ajax from "@/services"; |
|||
import "./index.scss"; |
|||
const ParkingRecordModal = (props) => { |
|||
const { |
|||
className = "", |
|||
title = null, |
|||
open = false, |
|||
tableData = {}, |
|||
tabsTitle = [ |
|||
{text: "停车记录信息", value: "1"}, |
|||
{text: "支付记录", value: "2"}, |
|||
{text: "退款订单", value: "3"}, |
|||
{text: "操作记录", value: "4"}, |
|||
{text: "历史处理", value: "5"}, |
|||
], |
|||
onCancel, |
|||
} = props; |
|||
|
|||
const [modalVisible, setModalVisible] = useState(false); // 模态框显示隐藏 |
|||
const [tabKey, setTabKey] = useState("1"); // tab默认值 |
|||
const [loading, setLoading] = useState(false); // 检索按钮加载状态 |
|||
const [payRecord, setPayRecord] = useState([]); //支付记录数据 |
|||
const [recordReviewModal, setRecordReviewModal] = useState({open: false, data: []}); // 历史记录详情 |
|||
|
|||
//历史处理的表头 |
|||
const historyProgressColumns = [ |
|||
{ |
|||
title: "序号", |
|||
dataIndex: "id", |
|||
key: "id", |
|||
align: "center", |
|||
render: (text, record, index) => index + 1, |
|||
}, |
|||
{ |
|||
title: "状态", |
|||
dataIndex: "status", |
|||
key: "status", |
|||
align: "center", |
|||
render: (text) => { |
|||
return text == 1 |
|||
? "待审核" |
|||
: text == 2 |
|||
? "已完成" |
|||
: text == 3 |
|||
? "已驳回" |
|||
: "--" |
|||
} |
|||
}, |
|||
{ |
|||
title: "处理记录ID", |
|||
dataIndex: "deal_record_id", |
|||
key: "deal_record_id", |
|||
align: "center", |
|||
render: (text) => ( |
|||
<> |
|||
<a onClick={() => { |
|||
navigator.clipboard.writeText(`${text}`).then(() => { message.success("已复制到剪切板") }); |
|||
}}>{text}</a> |
|||
</> |
|||
), |
|||
}, |
|||
{ |
|||
title: "处理时间", |
|||
dataIndex: "deal_time", |
|||
key: "deal_time", |
|||
align: "center", |
|||
}, |
|||
{ |
|||
title: "处理人", |
|||
dataIndex: "dealer", |
|||
key: "dealer", |
|||
align: "center", |
|||
}, |
|||
{ |
|||
title: "业务订单类型", |
|||
dataIndex: "business_type", |
|||
key: "business_type", |
|||
align: "center", |
|||
}, |
|||
{ |
|||
title: "更改项", |
|||
dataIndex: "change_content", |
|||
key: "change_content", |
|||
align: "center", |
|||
// render: (text) => { |
|||
// return text == 1 |
|||
// ? "调整出场时间" |
|||
// : text == 2 |
|||
// ? "变更车牌号" |
|||
// : text == 3 |
|||
// ? "更改订单金额" |
|||
// : text == 4 |
|||
// ? "免费该订单" |
|||
// : "作废该订单" |
|||
// } |
|||
}, |
|||
{ |
|||
title: "更改初始值", |
|||
dataIndex: "initial_value", |
|||
key: "initial_value", |
|||
align: "center", |
|||
}, |
|||
{ |
|||
title: "更改更新值", |
|||
dataIndex: "update_value", |
|||
key: "update_value", |
|||
align: "center", |
|||
}, |
|||
{ |
|||
title: "操作", |
|||
dataIndex: "operation", |
|||
key: "operation", |
|||
align: "center", |
|||
fixed: "right", |
|||
render: (_, record) => { |
|||
return ( |
|||
<Button |
|||
type="primary" |
|||
onClick={() => {$historyOperation(record?.deal_record_id)}} |
|||
> |
|||
操作 |
|||
</Button> |
|||
); |
|||
}, |
|||
}, |
|||
]; |
|||
|
|||
// 模态框关闭 |
|||
const $handleCancel = () => { |
|||
setModalVisible(false); |
|||
setTabKey("1"); |
|||
setPayRecord([]); |
|||
if(onCancel) { |
|||
onCancel(false); |
|||
}; |
|||
}; |
|||
|
|||
// tab切换 |
|||
const $changeKey = (key) => { |
|||
setTabKey(key); |
|||
setPayRecord([]); |
|||
if(key == 1) return; |
|||
if(!tableData?.park_id) return message.error("未获取到停车订单ID,请重新选择！") |
|||
setLoading(true); |
|||
let url = |
|||
key == "2" ? ajax.getStartExceptionPaymentList : // 支付记录 |
|||
key == "3" ? ajax.getStartExceptionRefundList : // 退款订单 |
|||
key == "4" ? ajax.getStartExceptionHandleList : // 操作记录 |
|||
key == "5" ? ajax.getStartExceptionHistoryList : null; // 历史处理 |
|||
url({park_record_id: tableData?.park_id}).then((res) => { |
|||
setLoading(false); |
|||
if (res.status === 20000 || res.status == 0) { |
|||
setPayRecord(res?.data?.list || []); |
|||
} else { |
|||
message.error(res.message); |
|||
} |
|||
}).catch((error) => { |
|||
setLoading(false); |
|||
message.error(error.message); |
|||
}); |
|||
}; |
|||
|
|||
// 表格 |
|||
const $renderModalTable = (columns, dataSource) => { |
|||
return ( |
|||
<Table |
|||
className="table" |
|||
rowKey={(row) => row?.order_id || row?.id || row?.deal_record_id || Math.random()*10000 } |
|||
columns={columns} |
|||
dataSource={dataSource} |
|||
scroll={{ y: 670 }} |
|||
loading={loading} |
|||
pagination={false} |
|||
/> |
|||
); |
|||
}; |
|||
|
|||
// 历史记录操作详情 |
|||
const $historyOperation = (id) => { |
|||
ajax.getStartExceptionParkingRecordsInfo({id}).then((res) => { |
|||
if (res.status === 20000 || res.status == 0) { |
|||
setRecordReviewModal({open: true, data: res?.data || []}) |
|||
} else { |
|||
message.error(res.message); |
|||
} |
|||
}).catch((error) => { |
|||
message.error(error.message); |
|||
}); |
|||
}; |
|||
|
|||
useEffect(() => { |
|||
setModalVisible(open) |
|||
}, [open]); |
|||
|
|||
return ( |
|||
<> |
|||
<Modal |
|||
className={`parking-record-modal ${className}`} |
|||
title={title} |
|||
open={modalVisible} |
|||
onCancel={$handleCancel} |
|||
destroyOnClose={true} |
|||
footer={null} |
|||
> |
|||
<Tabs |
|||
activeKey={tabKey} |
|||
onChange={$changeKey} |
|||
items={ |
|||
tabsTitle.map((item) => { |
|||
let tem; |
|||
switch (tabKey) { |
|||
case "1": |
|||
tem = <VehicleInformation data={tableData} type="1" />; |
|||
break; |
|||
case "2": |
|||
// 支付记录 |
|||
tem = $renderModalTable(payRecordColumns, payRecord) |
|||
break; |
|||
case "3": |
|||
// 退款订单 |
|||
tem = $renderModalTable(refundRecordColumns, payRecord) |
|||
break; |
|||
case "4": |
|||
// 操作记录 |
|||
tem = $renderModalTable(operatorRecordColumns, payRecord) |
|||
break; |
|||
case "5": |
|||
// 历史处理 |
|||
tem = $renderModalTable(historyProgressColumns, payRecord) |
|||
break; |
|||
default: |
|||
break; |
|||
} |
|||
return{ |
|||
label: item.text, |
|||
key: item.value, |
|||
children: tem |
|||
} |
|||
}) |
|||
} |
|||
/> |
|||
</Modal> |
|||
<RecordReviewModal |
|||
title="异常订单处理记录审核" |
|||
{...recordReviewModal} |
|||
disabledModal={true} |
|||
onCancel={() => {setRecordReviewModal({open: false, data: []})}} |
|||
/> |
|||
</> |
|||
); |
|||
} |
|||
|
|||
export default ParkingRecordModal; |
|||
@ -0,0 +1,290 @@ |
|||
@import "@/assets/css/mixin.scss"; |
|||
.parking-record-modal { |
|||
width: 1500px !important; |
|||
top: 20px !important; |
|||
.ant-modal-header { |
|||
padding: 16px; |
|||
} |
|||
.ant-modal-content { |
|||
.ant-modal-body { |
|||
padding-top: 0; |
|||
.ant-tabs .ant-tabs-nav-wrap .ant-tabs-nav-list { |
|||
width: 50%; |
|||
} |
|||
} |
|||
} |
|||
.item-title { |
|||
display: flex; |
|||
align-items: center; |
|||
margin-bottom: 15px; |
|||
color: #fff; |
|||
font-weight: 700; |
|||
&::before { |
|||
content: ""; |
|||
display: inline-block; |
|||
width: 5px; |
|||
height: 14px; |
|||
margin-right: 10px; |
|||
background-color: #177ddc; |
|||
} |
|||
} |
|||
.table { |
|||
width: 100%; |
|||
margin-top: 20px; |
|||
.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; |
|||
} |
|||
} |
|||
.process-view { |
|||
margin-top: 16px; |
|||
.item-content { |
|||
display: flex; |
|||
justify-content: center; |
|||
// align-items: center; |
|||
.start, |
|||
.end { |
|||
display: flex; |
|||
flex-direction: column; |
|||
width: 40%; |
|||
align-items: center; |
|||
overflow: hidden; |
|||
.num { |
|||
position: relative; |
|||
width: 30px; |
|||
height: 30px; |
|||
text-align: center; |
|||
line-height: 30px; |
|||
border: 1px solid #fff; |
|||
border-radius: 50%; |
|||
} |
|||
} |
|||
.start .num::after { |
|||
content: ""; |
|||
position: absolute; |
|||
left: 100%; |
|||
width: 1000px; |
|||
height: 2px; |
|||
background-color: #fff; |
|||
margin-top: 14px; |
|||
margin-left: 10px; |
|||
} |
|||
.end .num::before { |
|||
content: ""; |
|||
position: absolute; |
|||
right: 100%; |
|||
width: 1000px; |
|||
height: 2px; |
|||
background-color: #fff; |
|||
margin-top: 14px; |
|||
margin-right: 10px |
|||
} |
|||
.centre { |
|||
margin: 7px 10px 0; |
|||
} |
|||
} |
|||
} |
|||
.order-text, |
|||
.process-mode { |
|||
em { |
|||
margin-right: 5px; |
|||
color: #a61d24; |
|||
} |
|||
} |
|||
.order-text { |
|||
margin-top: 15px; |
|||
>span { |
|||
display: block; |
|||
margin-bottom: 10px; |
|||
} |
|||
} |
|||
.process-mode { |
|||
margin-top: 15px; |
|||
.yisa-search { |
|||
>label { |
|||
margin-right: 5px; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
.vehicle-information-modal { |
|||
.park, |
|||
.car, |
|||
.car-img { |
|||
margin-top: 20px; |
|||
.title { |
|||
display: flex; |
|||
align-items: center; |
|||
font-size: 14px; |
|||
.line { |
|||
flex: 1; |
|||
border: 1px dotted #607092; |
|||
padding-left: 10px; |
|||
} |
|||
>span { |
|||
&:first-child { |
|||
margin-right: 10px; |
|||
} |
|||
} |
|||
} |
|||
.content { |
|||
display: flex; |
|||
flex-wrap: wrap; |
|||
padding: 20px 20px 0; |
|||
font-size: 14px; |
|||
>.item { |
|||
display: flex; |
|||
align-items: center; |
|||
width: calc(100% / 3 - 10px); |
|||
margin-top: 10px; |
|||
&:nth-child(3n - 1) { |
|||
margin-left: 15px; |
|||
margin-right: 15px; |
|||
} |
|||
&:nth-child(-n + 3) { |
|||
margin-top: 0; |
|||
} |
|||
>span { |
|||
display: inline-block; |
|||
width: 120px; |
|||
height: 32px; |
|||
line-height: 32px; |
|||
background: rgba(150, 161, 192, 0.24); |
|||
text-align: center; |
|||
&:last-child { |
|||
width: 320px; |
|||
height: 32px; |
|||
padding: 0 20px; |
|||
text-align: center; |
|||
background: #3E4557; |
|||
box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.12); |
|||
@include textEllipsis() |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
.img-box { |
|||
display: flex; |
|||
padding: 20px 20px 0; |
|||
.img-left, |
|||
.img-right { |
|||
width: 400px; |
|||
.img-null { |
|||
border: 1px solid #607092; |
|||
width: 100%; |
|||
height: 200px; |
|||
line-height: 200px; |
|||
text-align: center; |
|||
.ant-image { |
|||
width: 100%; |
|||
height: 100%; |
|||
.ant-image-img { |
|||
height: 100%; |
|||
object-fit: contain; |
|||
} |
|||
} |
|||
} |
|||
>span { |
|||
display: block; |
|||
text-align: center; |
|||
margin-top: 10px; |
|||
} |
|||
} |
|||
.img-right { |
|||
margin-left: 50px; |
|||
} |
|||
} |
|||
} |
|||
.abnormal-order--table-content { |
|||
padding: 0 50px; |
|||
.park { |
|||
margin-top: 0; |
|||
} |
|||
.park, |
|||
.car, |
|||
.car-img { |
|||
.content { |
|||
>.item { |
|||
>span { |
|||
&:last-child { |
|||
width: 270px; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
} |
|||
@ -0,0 +1,52 @@ |
|||
import ajax from "@/config/ajax"; |
|||
|
|||
export default { |
|||
// 发起异常处理 表格数据
|
|||
getStartExceptionTableData: (params) => { |
|||
return ajax({ |
|||
url: "/api/fin/abnormal_action/abnormal_list", |
|||
type: "post", |
|||
data: params, |
|||
}); |
|||
}, |
|||
// 发起异常处理 -- 详情支付记录
|
|||
getStartExceptionPaymentList: (params) => { |
|||
return ajax({ |
|||
url: "/api/fin/abnormal_action/abnormal_payment", |
|||
type: "post", |
|||
data: params, |
|||
}); |
|||
}, |
|||
// 发起异常处理 -- 详情退款记录
|
|||
getStartExceptionRefundList: (params) => { |
|||
return ajax({ |
|||
url: "/api/fin/abnormal_action/abnormal_refund", |
|||
type: "post", |
|||
data: params, |
|||
}); |
|||
}, |
|||
// 发起异常处理 -- 详情操作记录
|
|||
getStartExceptionHandleList: (params) => { |
|||
return ajax({ |
|||
url: "/api/fin/abnormal_action/abnormal_operate", |
|||
type: "post", |
|||
data: params, |
|||
}); |
|||
}, |
|||
// 发起异常处理 -- 详情历史处理
|
|||
getStartExceptionHistoryList: (params) => { |
|||
return ajax({ |
|||
url: "/api/fin/abnormal_action/abnormal_history", |
|||
type: "post", |
|||
data: params, |
|||
}); |
|||
}, |
|||
// 发起异常处理 -- 详情历史处理详情
|
|||
getStartExceptionParkingRecordsInfo: (params) => { |
|||
return ajax({ |
|||
url: "/api/fin/abnormal_action/parkingRecordsInfo", |
|||
type: "post", |
|||
data: params, |
|||
}); |
|||
}, |
|||
} |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue