You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1254 lines
52 KiB
1254 lines
52 KiB
import React, { useState, useRef, useEffect } from "react";
|
|
import {
|
|
message,
|
|
Pagination,
|
|
Table,
|
|
Input,
|
|
Space,
|
|
Modal,
|
|
Button,
|
|
Select,
|
|
Tabs,
|
|
Descriptions,
|
|
Timeline
|
|
} from "antd";
|
|
const { TextArea } = Input;
|
|
import moment from "moment";
|
|
import ajax from '@/config/ajax.js'
|
|
import { TableModule } from "@/components";
|
|
import {
|
|
bindColumns,
|
|
modiColumns,
|
|
formRefundColumns
|
|
} from "./dataSource";
|
|
import { dictionary } from "@/config/common.js";
|
|
import "./index.scss";
|
|
function CarInfo() {
|
|
const [carId, setCarId] = useState()
|
|
const columns = [
|
|
{
|
|
title: "序号",
|
|
dataIndex: "index",
|
|
key: "index",
|
|
align: "center",
|
|
fixed: "left",
|
|
render: (text, record, index) => index + 1,
|
|
width: 100,
|
|
},
|
|
{
|
|
title: "车牌号",
|
|
dataIndex: "plate_number",
|
|
key: "plate_number",
|
|
},
|
|
{
|
|
title: "会员姓名",
|
|
dataIndex: "name",
|
|
key: "name",
|
|
},
|
|
{
|
|
title: "会员手机号",
|
|
dataIndex: "mobile",
|
|
key: "mobile",
|
|
},
|
|
{
|
|
title: "行驶本认证",
|
|
dataIndex: "authStateName",
|
|
key: "authStateName",
|
|
},
|
|
{
|
|
title: "欠费金额",
|
|
dataIndex: "arrears_money",
|
|
key: "arrears_money",
|
|
},
|
|
{
|
|
title: "创建时间",
|
|
dataIndex: "create_time",
|
|
key: "create_time",
|
|
},
|
|
{
|
|
title: "操作",
|
|
dataIndex: "operation",
|
|
key: "operation",
|
|
fixed: "right",
|
|
align: "center",
|
|
width: 300,
|
|
render: (text, record) => (
|
|
<>
|
|
<span type="primary" style={{ display: 'block', textAlign: 'center' }} onClick={() => {
|
|
setCarId(record.carId);
|
|
searchDetail(record);
|
|
}}>
|
|
<a>详情</a>
|
|
</span>
|
|
</>
|
|
),
|
|
},
|
|
];
|
|
//构建表头
|
|
const createCol = (label, name, type) => {
|
|
label.length == name.length ? null : console.log('参数缺失', label.length, name.length)
|
|
var arr = []
|
|
label?.map((item, index) => {
|
|
let cm = {
|
|
title: item,
|
|
dataIndex: name[index],
|
|
key: name[index],
|
|
align: "center",
|
|
}
|
|
switch (item) {
|
|
case "序号":
|
|
cm.render = (text, record, index) => index + 1
|
|
break
|
|
case "退款订单ID":
|
|
case "业务订单ID":
|
|
case "支付订单ID":
|
|
cm.render = (text) => (
|
|
<>
|
|
<a onClick={() => {
|
|
navigator.clipboard.writeText(`${text}`).then(() => { message.success("已复制到剪切板") });
|
|
}}>{text}</a>
|
|
</>
|
|
)
|
|
break
|
|
default: break
|
|
}
|
|
arr.push(cm)
|
|
})
|
|
var obj = {
|
|
title: "操作",
|
|
dataIndex: "operation",
|
|
key: "operation",
|
|
fixed: "right",
|
|
align: "center",
|
|
}
|
|
switch (type) {
|
|
case 2:
|
|
obj.render = (text, record) => (<>
|
|
<span type="primary" style={{ display: 'block', textAlign: 'center' }} onClick={() => {
|
|
setYcddData(record)
|
|
setDetailVisible(true)
|
|
}}>
|
|
<a>详情</a>
|
|
</span>
|
|
</>)
|
|
arr.push(obj)
|
|
break
|
|
case 5:
|
|
obj.render = (text, record) => (<>
|
|
<span type="primary" style={{ display: 'block', textAlign: 'center' }} onClick={() => {
|
|
refundSearch(record)
|
|
setTkddVisible(true)
|
|
}}>
|
|
<a>详情</a>
|
|
</span>
|
|
</>)
|
|
arr.push(obj)
|
|
break
|
|
case 6:
|
|
obj.render = (text, record) => (<>
|
|
<span type="primary" style={{ display: 'block', textAlign: 'center' }} onClick={() => {
|
|
setTkddVisible(true)
|
|
}}>
|
|
<a>详情</a>
|
|
</span>
|
|
</>)
|
|
arr.push(obj)
|
|
break
|
|
case 7:
|
|
obj.render = (text, record) => (<>
|
|
<span type="primary" style={{ display: 'block', textAlign: 'center' }} onClick={() => {
|
|
setTkddVisible(true)
|
|
}}>
|
|
<a>详情</a>
|
|
</span>
|
|
</>)
|
|
arr.push(obj)
|
|
break
|
|
case 8:
|
|
obj.render = (text, record) => (<>
|
|
<span type="primary" style={{ display: 'block', textAlign: 'center' }} onClick={() => {
|
|
|
|
}}>
|
|
<a>详情</a>
|
|
</span>
|
|
</>)
|
|
arr.push(obj)
|
|
break
|
|
default: break
|
|
}
|
|
return arr
|
|
}
|
|
//基本信息检索条件
|
|
const formSearch = [
|
|
{
|
|
name: "carId",
|
|
type: "Input",
|
|
label: "车牌号",
|
|
placeholder: "请输入车牌号",
|
|
},
|
|
{
|
|
name: "mobile",
|
|
type: "Input",
|
|
label: "会员手机号",
|
|
placeholder: "请输入会员手机号",
|
|
},
|
|
{
|
|
name: "authState",
|
|
type: "Select",
|
|
label: "认证状态",
|
|
options: [
|
|
{
|
|
label: "已认证",
|
|
value: 0,
|
|
},
|
|
{
|
|
label: "未认证",
|
|
value: 1,
|
|
},
|
|
|
|
],
|
|
},
|
|
{
|
|
name: "bingState",
|
|
type: "Select",
|
|
label: "绑定状态",
|
|
options: [
|
|
{
|
|
label: "已绑定",
|
|
value: 0,
|
|
},
|
|
{
|
|
label: "未绑定",
|
|
value: 1,
|
|
},
|
|
|
|
],
|
|
},
|
|
{
|
|
name: "timePeriod",
|
|
type: "RangePicker",
|
|
label: "时间段",
|
|
defaultValue: [moment().subtract(1, "month"), moment()],
|
|
},
|
|
];
|
|
//退费记录检索条件
|
|
const formRefundSearch = [
|
|
{
|
|
name: "refund_id",
|
|
type: "Input",
|
|
label: "退款订单号",
|
|
placeholder: "请输入退款订单号",
|
|
},
|
|
{
|
|
name: "type",
|
|
type: "Select",
|
|
label: "业务订单类型",
|
|
options: dictionary.BusinessOrderType,
|
|
},
|
|
{
|
|
name: "park_id",
|
|
type: "Input",
|
|
label: "业务订单ID",
|
|
placeholder: "请输入业务订单ID",
|
|
},
|
|
{
|
|
name: "order_id",
|
|
type: "Input",
|
|
label: "支付订单ID",
|
|
placeholder: "请输入支付订单ID",
|
|
},
|
|
{
|
|
name: "state",
|
|
type: "Select",
|
|
label: "退款状态",
|
|
options: [
|
|
{
|
|
label: "全部",
|
|
value: 0,
|
|
},
|
|
{
|
|
label: "待确认",
|
|
value: 1,
|
|
},
|
|
{
|
|
label: "退款中",
|
|
value: 2,
|
|
},
|
|
{
|
|
label: "已完成",
|
|
value: 3,
|
|
},
|
|
{
|
|
label: "退款失败",
|
|
value: 4,
|
|
},
|
|
],
|
|
},
|
|
{
|
|
name: "reason",
|
|
type: "Select",
|
|
label: "退款原因",
|
|
options: [
|
|
{
|
|
label: "全部",
|
|
value: 0,
|
|
},
|
|
{
|
|
label: "异常订单处理",
|
|
value: 1,
|
|
},
|
|
{
|
|
label: "自动平单退款",
|
|
value: 2,
|
|
},
|
|
],
|
|
},
|
|
{
|
|
name: "flow_id",
|
|
type: "Input",
|
|
label: "渠道流水号",
|
|
placeholder: "请输入渠道流水号",
|
|
},
|
|
{
|
|
name: "timePeriod",
|
|
type: "RangePicker",
|
|
label: "时间段",
|
|
defaultTitle: ['退款时间', '至'],
|
|
defaultValue: [moment().subtract(1, "month"), moment()],
|
|
},
|
|
];
|
|
//所有检索条件
|
|
const ash = [
|
|
{//1
|
|
name: "region",
|
|
type: "TreeSelect",
|
|
label: "区域",
|
|
},
|
|
{//2
|
|
name: "operator",
|
|
type: "Select",
|
|
label: "商户名称",
|
|
options: dictionary.MerchantName,
|
|
},
|
|
{//3
|
|
name: "road",
|
|
type: "Input",
|
|
label: "停车场名称",
|
|
placeholder: "请输入停车场名称",
|
|
},
|
|
{//4
|
|
name: "road_type",
|
|
type: "Select",
|
|
label: "车场类型",
|
|
options: [
|
|
{
|
|
label: "全部",
|
|
value: 0,
|
|
},
|
|
{
|
|
label: "路侧平行",
|
|
value: 1,
|
|
},
|
|
{
|
|
label: "路侧垂停",
|
|
value: 2,
|
|
},
|
|
{
|
|
label: "封闭车场",
|
|
value: 3,
|
|
},
|
|
{
|
|
label: "半封闭车场",
|
|
value: 4,
|
|
},
|
|
],
|
|
},
|
|
{//5
|
|
name: "phone",
|
|
type: "Input",
|
|
label: "手机号",
|
|
placeholder: "请输入手机号",
|
|
},
|
|
{//6
|
|
name: "type",
|
|
type: "Select",
|
|
label: "出入场类型",
|
|
placeholder: "请选择出入场类型",
|
|
defaultValue: 1,
|
|
options: [
|
|
{
|
|
label: "入场",
|
|
value: 1,
|
|
},
|
|
{
|
|
label: "出场",
|
|
value: 2,
|
|
},
|
|
],
|
|
},
|
|
|
|
{//7
|
|
name: "b",
|
|
type: "Input",
|
|
label: "商品名称",
|
|
placeholder: "请输入商品名称",
|
|
},
|
|
{//8
|
|
name: "b",
|
|
type: "Select",
|
|
label: "购买渠道",
|
|
placeholder: "请选择购买渠道",
|
|
options: [
|
|
{
|
|
label: "全部",
|
|
value: 0,
|
|
},
|
|
{
|
|
label: "线上渠道",
|
|
value: 1,
|
|
},
|
|
{
|
|
label: "后台录入",
|
|
value: 2,
|
|
},
|
|
],
|
|
},
|
|
{//9
|
|
name: "b",
|
|
type: "Select",
|
|
label: "订单状态",
|
|
placeholder: "请选择订单状态",
|
|
options: [
|
|
{
|
|
label: "全部",
|
|
value: 0,
|
|
},
|
|
{
|
|
label: "未生效",
|
|
value: 1,
|
|
},
|
|
{
|
|
label: "生效中",
|
|
value: 2,
|
|
},
|
|
{
|
|
label: "已失效",
|
|
value: 3,
|
|
},
|
|
],
|
|
},
|
|
{//10
|
|
name: "PayChannel",
|
|
type: "Select",
|
|
label: "支付渠道",
|
|
placeholder: "请选择支付渠道",
|
|
options: dictionary.PayChannel,
|
|
},
|
|
{//11
|
|
name: "payment_equipment",
|
|
type: "Select",
|
|
label: "支付设备",
|
|
placeholder: "请选择支付设备",
|
|
options: dictionary.PayDevice
|
|
},
|
|
{//12
|
|
name: "pay_type",
|
|
type: "Select",
|
|
label: "支付方式",
|
|
placeholder: "请选择支付方式",
|
|
options: dictionary.PaydMethod,
|
|
},
|
|
{//13
|
|
name: "timePeriod",
|
|
type: "RangePicker",
|
|
label: "时间段",
|
|
defaultValue: [moment().startOf("day"), moment()],
|
|
},
|
|
{//14
|
|
name: "b",
|
|
type: "Select",
|
|
label: "退款方式",
|
|
placeholder: "请选择退款方式",
|
|
options: dictionary.PaydMethod,
|
|
},
|
|
{//15
|
|
name: "b",
|
|
type: "Input",
|
|
label: "第三方流水号",
|
|
placeholder: "请输入第三方流水号",
|
|
},
|
|
{//16
|
|
name: "timePeriod",
|
|
type: "RangePicker",
|
|
label: "时间段",
|
|
defaultTitle: ['支付时间', '至']
|
|
// defaultValue: [moment().startOf("day"), moment()],
|
|
},
|
|
{//17
|
|
name: "timePeriod",
|
|
type: "RangePicker",
|
|
label: "时间段",
|
|
defaultTitle: ['订购时间', '至']
|
|
// defaultValue: [moment().startOf("day"), moment()],
|
|
},
|
|
{//18
|
|
name: "timePeriod",
|
|
type: "RangePicker",
|
|
label: "时间段",
|
|
defaultTitle: ['预约到场时间', '至']
|
|
// defaultValue: [moment().startOf("day"), moment()],
|
|
},
|
|
{//19
|
|
name: "plate",
|
|
type: "Input",
|
|
label: "车牌号",
|
|
placeholder: "请输入车牌号",
|
|
},
|
|
];
|
|
const [tag, setTag] = useState('1');
|
|
const [edit, setEdit] = useState(true);
|
|
const [resultData, setResultData] = useState([])
|
|
const [baseData, setBaseData] = useState({
|
|
//car_type:2
|
|
})
|
|
const [bindData, setBindData] = useState([])//绑定
|
|
const [modiData, setModiData] = useState([])//修改
|
|
const [detailData, setDetailData] = useState([])//
|
|
const [ycddData, setYcddData] = useState([])//异常订单数据
|
|
const [detailVisible, setDetailVisible] = useState(false);
|
|
const [ltcVisible, setLtcVisible] = useState(false);
|
|
const [timesVisible, setTimesVisible] = useState(false); //退款尝试次数展开
|
|
const [ycddVisible, setYcddVisible] = useState(false);
|
|
const [tkddVisible, setTkddVisible] = useState(false);
|
|
const [cardVisible, setCardVisible] = useState(false);
|
|
const [eaeVisible, setEaeVisible] = useState(false);//出入场图片
|
|
const [bigpicVisible, setBigpicVisible] = useState(false);//大图展示
|
|
const [bigPic, setBigPic] = useState();
|
|
const [total, setTotal] = useState(0);
|
|
const [tabKey, setTabKey] = useState("1");
|
|
function openModal(params) {
|
|
setDetailVisible(true);
|
|
}
|
|
function changeKey(key) {
|
|
setTabKey(key);
|
|
}
|
|
|
|
//基本信息查询
|
|
function search(e) {
|
|
// if (!e.type) {
|
|
// e.type = 1
|
|
// }
|
|
ajax({
|
|
url: "/api/ope/car/list",
|
|
type: "post",
|
|
data: { ...e },
|
|
}).then((res) => {
|
|
let { status, data, total } = res
|
|
if (status == 20000) {
|
|
setResultData(data)
|
|
setTotal(total)
|
|
} else {
|
|
message.error(res.message)
|
|
}
|
|
})
|
|
}
|
|
//基本信息详情
|
|
function searchDetail(e) {
|
|
ajax({
|
|
url: "/api/ope/car/get_base_info",
|
|
type: "get",
|
|
data: { carId: e?.carId || carId },
|
|
}).then((res) => {
|
|
let { status, data, total } = res
|
|
if (status == 20000) {
|
|
setBaseData(data)
|
|
setTag('2')
|
|
} else {
|
|
message.error(res.message)
|
|
}
|
|
})
|
|
ajax({//绑定
|
|
url: "/api/ope/car/get_bind_records",
|
|
type: "get",
|
|
data: { carId: e?.carId || carId },
|
|
}).then((res) => {
|
|
let { status, data, total } = res
|
|
if (status == 20000) {
|
|
setBindData(data)
|
|
} else {
|
|
message.error(res.message)
|
|
}
|
|
})
|
|
ajax({//修改数据
|
|
url: "/api/ope/car/get_edit_records",
|
|
type: "get",
|
|
data: { carId: e?.carId || carId },
|
|
}).then((res) => {
|
|
let { status, data, total } = res
|
|
if (status == 20000) {
|
|
setModiData(data)
|
|
} else {
|
|
message.error(res.message)
|
|
}
|
|
})
|
|
}
|
|
//编辑车辆外观信息
|
|
function editDetail() {
|
|
ajax({
|
|
url: "/api/ope/car/edit_car",
|
|
type: "post",
|
|
data: {
|
|
carId: baseData.carId,
|
|
car_brand: baseData.car_brand,
|
|
car_model: baseData.car_model,
|
|
car_color: baseData.car_color,
|
|
car_type: baseData.car_type,
|
|
plate_type: baseData.plate_type,
|
|
},
|
|
}).then((res) => {
|
|
let { status, data } = res
|
|
if (status == 20000) {
|
|
setEdit(true)
|
|
//window.location.reload()
|
|
//setTag('2')
|
|
searchDetail()
|
|
} else {
|
|
message.error(res.message)
|
|
}
|
|
})
|
|
|
|
}
|
|
//详情其他模块查询
|
|
function searchOther(e) {
|
|
var url = ''
|
|
switch (tabKey) {
|
|
case "1":
|
|
url = ""
|
|
break
|
|
case "2":
|
|
url = "/api/bpm/record/get_record_list"//停车记录
|
|
break
|
|
case "3":
|
|
url = "/api/bpm/record/get_parking_arrears_list"//欠费记录
|
|
break
|
|
case "4":
|
|
url = "/api/bpm/record/get_payment_list"//支付记录
|
|
break
|
|
case "5":
|
|
url = "/api/ope/record/get_refund_list"//退费订单
|
|
break
|
|
case "6":
|
|
url = ""
|
|
break
|
|
case "7":
|
|
url = ""
|
|
break
|
|
case "8":
|
|
url = ""
|
|
break
|
|
default: break
|
|
}
|
|
if (tabKey == '3' && e && !e?.type) {
|
|
e.type = 1
|
|
}
|
|
ajax({
|
|
url: url,
|
|
type: "post",
|
|
data: { ...e, carId: carId, startTime: e?.start_time, endTime: e?.end_time },
|
|
}).then((res) => {
|
|
let { status, data, total } = res
|
|
if (status == 20000) {
|
|
if (data.list) {
|
|
setResultData(data.list)
|
|
setTotal(data.total)
|
|
} else {
|
|
setResultData(data)
|
|
setTotal(total)
|
|
}
|
|
} else {
|
|
setResultData([])
|
|
message.error(res.message)
|
|
}
|
|
})
|
|
}
|
|
//退款订单详情
|
|
function refundSearch(e) {
|
|
ajax({
|
|
url: "/api/ope/record/get_refund_info",
|
|
type: "get",
|
|
data: { id: e.refund_id },
|
|
}).then((res) => {
|
|
let { status, data } = res
|
|
if (status == 20000) {
|
|
//setResultData(data)
|
|
setYcddData(data)
|
|
} else {
|
|
message.error(res.message)
|
|
}
|
|
})
|
|
}
|
|
//停车记录信息渲染
|
|
function renderParkRecord(params) {
|
|
return (
|
|
<div className="ltc-box">
|
|
<div className="ltc-box-title"><div className="text">停车场信息</div><div className="line"></div></div>
|
|
<div className="ltc-content">
|
|
<div className="ltc-item">
|
|
<div className="new-item">停车场名称</div><div className="new-value">{params?.road || "--"}</div>
|
|
</div>
|
|
<div className="ltc-item">
|
|
<div className="new-item">泊位号</div><div className="new-value">{params.berth_id || "--"}</div>
|
|
</div>
|
|
<div className="ltc-item">
|
|
<div className="new-item">区域</div><div className="new-value">{params.region || "--"}</div>
|
|
</div>
|
|
<div className="ltc-item">
|
|
<div className="new-item">商户</div><div className="new-value">{params.operator || "--"}</div>
|
|
</div>
|
|
<div className="ltc-item">
|
|
<div className="new-item">车场类型</div><div className="new-value">{params.road_type || "--"}</div>
|
|
</div>
|
|
</div>
|
|
<div className="ltc-box-title"><div className="text">停车信息</div><div className="line"></div></div>
|
|
<div className="ltc-content">
|
|
<div className="ltc-item">
|
|
<div className="new-item">车牌号</div><div className="new-value">{params.plate || "--"}</div>
|
|
</div>
|
|
<div className="ltc-item">
|
|
<div className="new-item">会员手机号</div><div className="new-value">{params.phone || "--"}</div>
|
|
</div>
|
|
<div className="ltc-item">
|
|
<div className="new-item">入场时间</div><div className="new-value">{params.in_time || "--"}</div>
|
|
</div>
|
|
<div className="ltc-item">
|
|
<div className="new-item">出场时间</div><div className="new-value">{params.out_time || "--"}</div>
|
|
</div>
|
|
<div className="ltc-item">
|
|
<div className="new-item">停车时长</div><div className="new-value">{params.admission_time || "--"}</div>
|
|
</div>
|
|
<div className="ltc-item">
|
|
<div className="new-item">订单金额</div><div className="new-value">{params.order_amount || "--"}</div>
|
|
</div>
|
|
<div className="ltc-item">
|
|
<div className="new-item">停车卡折扣</div><div className="new-value">{params.parking_card_discount || "--"}</div>
|
|
</div>
|
|
<div className="ltc-item">
|
|
<div className="new-item">车场折扣</div><div className="new-value">{params.road_discount || "--"}</div>
|
|
</div>
|
|
<div className="ltc-item">
|
|
<div className="new-item">应收金额</div><div className="new-value">{params.receivable_amount || "--"}</div>
|
|
</div>
|
|
<div className="ltc-item">
|
|
<div className="new-item">优惠券</div><div className="new-value">{params.preferential_amount || "--"}</div>
|
|
</div>
|
|
<div className="ltc-item">
|
|
<div className="new-item">优惠总计</div><div className="new-value">{params.preferential_total || "--"}</div>
|
|
</div>
|
|
<div className="ltc-item">
|
|
<div className="new-item">实付金额</div><div className="new-value">{params.actual_amount || "--"}</div>
|
|
</div>
|
|
<div className="ltc-item">
|
|
<div className="new-item">优惠退款</div><div className="new-value">{params.refund_discount || "--"}</div>
|
|
</div>
|
|
<div className="ltc-item">
|
|
<div className="new-item">实付退款</div><div className="new-value">{params.actual_refund || "--"}</div>
|
|
</div>
|
|
<div className="ltc-item">
|
|
<div className="new-item">退款总计</div><div className="new-value">{params.refund_total || "--"}</div>
|
|
</div>
|
|
<div className="ltc-item">
|
|
<div className="new-item">入场收费员</div><div className="new-value">{params.in_person || "--"}</div>
|
|
</div>
|
|
<div className="ltc-item">
|
|
<div className="new-item">出场收费员</div><div className="new-value">{params.out_person || "--"}</div>
|
|
</div>
|
|
</div>
|
|
<div className="ltc-box-title"><div className="text">入场照片</div><div className="line"></div></div>
|
|
<Descriptions title="">
|
|
<Descriptions.Item label=""><img width={300} src={params.in_veh_pic} onClick={() => { setBigPic(params.in_veh_pic); setBigpicVisible(true) }} /></Descriptions.Item>
|
|
<Descriptions.Item label=""><img width={300} src={params.in_plate_pic} onClick={() => { setBigPic(params.in_plate_pic); setBigpicVisible(true) }} /></Descriptions.Item>
|
|
</Descriptions>
|
|
</div>
|
|
);
|
|
}
|
|
//基本信息渲染
|
|
function renderRecord(params) {
|
|
return (
|
|
<div style={{ padding: '18px' }}>
|
|
<div className="base-ltc">
|
|
<div className="ltc-img">
|
|
<img src={baseData.car_img} width={600} />
|
|
</div>
|
|
<div className="ltc-box">
|
|
<div className="ltc-box-title"><div className="ltc-icon"></div>车辆归属信息</div>
|
|
<div className="ltc-content">
|
|
<div className="ltc-item">
|
|
<div className="new-item">车牌颜色：</div>
|
|
<div className="new-value">{baseData.plate_color || "--"}</div>
|
|
</div>
|
|
<div className="ltc-item">
|
|
<div className="new-item">车牌号:</div>
|
|
<div className="new-value">{baseData.plate_number || "--"}</div>
|
|
</div>
|
|
<div className="ltc-item">
|
|
<div className="new-item">绑定会员账户:</div>
|
|
<div className="new-value">{baseData.mobile || "--"}</div>
|
|
</div>
|
|
<div className="ltc-item">
|
|
<div className="new-item">认证状态:</div>
|
|
<div className="new-value"> {baseData.authStateName || "--"}</div>
|
|
</div>
|
|
<div className="ltc-item">
|
|
<div className="new-item">车牌归属地:</div>
|
|
<div className="new-value"> {baseData.home_location || "--"}</div>
|
|
</div>
|
|
<div className="ltc-item">
|
|
<div className="new-item">创建时间:</div>
|
|
<div className="new-value">{baseData.create_time || "--"}</div>
|
|
</div>
|
|
</div>
|
|
<div className="ltc-box-title">
|
|
<div className="ltc-icon"></div>车辆外观信息
|
|
{
|
|
edit ? <div className="ltc-btn" onClick={() => { setEdit(false) }}>编辑</div> :
|
|
<>
|
|
<div className="ltc-btn" onClick={() => { editDetail(); }}>保存</div>
|
|
<div className="ltc-btn ltc-cancel" onClick={() => { setEdit(true) }}>取消</div>
|
|
</>
|
|
}
|
|
</div>
|
|
<div className="ltc-content">
|
|
<div className="ltc-item">
|
|
<div className="new-item">车辆品牌：</div>
|
|
<Input className="ltc-item-input" value={baseData.car_brand} onChange={(e) => { console.log(e); setBaseData({ ...baseData, car_brand: e.target.value }) }} placeholder="请输入车辆品牌" disabled={edit}></Input>
|
|
</div>
|
|
<div className="ltc-item">
|
|
<div className="new-item">车辆型号：</div>
|
|
<Input className="ltc-item-input" value={baseData.car_model} placeholder="请输入车辆型号" disabled={edit}></Input>
|
|
</div>
|
|
<div className="ltc-item">
|
|
<div className="new-item">车身颜色：</div>
|
|
<Input className="ltc-item-input" value={baseData.car_color} placeholder="请输入车身颜色" disabled={edit}></Input>
|
|
</div>
|
|
<div className="ltc-item">
|
|
<div className="new-item"> 车辆类型：</div>
|
|
<Select
|
|
disabled={edit}
|
|
defaultValue={baseData.car_type}
|
|
options={[
|
|
{
|
|
label: "大型车",
|
|
value: 1,
|
|
},
|
|
{
|
|
label: "中型车",
|
|
value: 2,
|
|
},
|
|
{
|
|
label: "小型车",
|
|
value: 3,
|
|
},
|
|
]}
|
|
placeholder={''}
|
|
/>
|
|
</div>
|
|
<div className="ltc-item">
|
|
号牌类型：
|
|
<Select
|
|
disabled={edit}
|
|
options={dictionary.PlateType}
|
|
fieldNames={{ label: 'text', value: 'value' }}
|
|
defaultValue={baseData?.plate_type}
|
|
placeholder={''}
|
|
/>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="ltc-box">
|
|
<div className="ltc-box-title"><div className="ltc-icon"></div>车辆绑定记录</div>
|
|
<div className="table-wrap">
|
|
<Table
|
|
columns={bindColumns}
|
|
dataSource={bindData}
|
|
scroll={{ x: 1000 }}
|
|
// className="yisa-table"
|
|
pagination={false}
|
|
rowKey={(record) => record.id}
|
|
/>
|
|
</div>
|
|
<div className="ltc-box-title"><div className="ltc-icon"></div>车辆信息修改记录</div>
|
|
<Table
|
|
columns={modiColumns}
|
|
dataSource={modiData}
|
|
scroll={{ x: 1000 }}
|
|
// className="yisa-table"
|
|
pagination={false}
|
|
rowKey={(record) => record.id}
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
//其他页面渲染
|
|
function renderTable(columns, arr, dataSource) {
|
|
return (
|
|
<TableModule
|
|
columns={columns}
|
|
tableData={dataSource}
|
|
formSearch={arr}
|
|
total={total}
|
|
search={searchOther}
|
|
rowKey={(record) => record.id}
|
|
/>
|
|
);
|
|
}
|
|
//退款订单详情
|
|
const tkddModal = <div className="ltc-box">
|
|
<div className="ltc-box-title"><div className="text">退款订单:{ycddData?.refund_id}</div><div className="line"></div></div>
|
|
<div className="ltc-content">
|
|
<div className="ltc-item">
|
|
<div className="new-item">生成时间</div><div className="new-value">{ycddData?.refund_time || "--"}</div>
|
|
</div>
|
|
<div className="ltc-item">
|
|
<div className="new-item">退款状态</div><div className="new-value">{ycddData.refund_state || "--"}</div>
|
|
</div>
|
|
<div className="ltc-item">
|
|
<div className="new-item">支付渠道</div><div className="new-value">{ycddData.payment_channels || "--"}</div>
|
|
</div>
|
|
<div className="ltc-item">
|
|
<div className="new-item">退款方式</div><div className="new-value">{ycddData.refund_type || "--"}</div>
|
|
</div>
|
|
<div className="ltc-item">
|
|
<div className="new-item">应退实付金额</div><div className="new-value">{ycddData.refund_actual_amount || "--"}</div>
|
|
</div>
|
|
<div className="ltc-item">
|
|
<div className="new-item">已退实付金额</div><div className="new-value">{ycddData.has_refund_actual_amount || "--"}</div>
|
|
</div>
|
|
<div className="ltc-item">
|
|
<div className="new-item">应退优惠金额</div><div className="new-value">{ycddData.refund_discount_amount || "--"}</div>
|
|
</div>
|
|
<div className="ltc-item">
|
|
<div className="new-item">已退优惠金额</div><div className="new-value">{ycddData.has_refund_discount_amount || "--"}</div>
|
|
</div>
|
|
<div className="ltc-item">
|
|
<div className="new-item">退款尝试次数</div><div className="new-value">{ycddData.try_count || "--"}
|
|
{timesVisible ?
|
|
<a onClick={() => { setTimesVisible(false) }}>收起</a> :
|
|
<a onClick={() => { setTimesVisible(true) }}>查看</a>}
|
|
</div>
|
|
</div>
|
|
<div className="ltc-item">
|
|
<div className="new-item">最近尝试时间</div><div className="new-value">{ycddData.latest_try_time || "--"}</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
{timesVisible ? <>
|
|
<div className="ltc-box-title"><div className="text">退款尝试详情</div><div className="line"></div></div>
|
|
<Table
|
|
columns={formRefundColumns}
|
|
dataSource={ycddData.try_list}
|
|
scroll={{ x: 1000 }}
|
|
// className="yisa-table"
|
|
pagination={false}
|
|
rowKey={(record) => record.id}
|
|
/> </> :
|
|
<>
|
|
<div className="ltc-box-title"><div className="text">支付订单:{ycddData.order_id}</div><div className="line"></div></div>
|
|
<div className="ltc-content">
|
|
<div className="ltc-item">
|
|
<div className="new-item">平台商户</div><div className="new-value">{ycddData.payment_operator_name}</div>
|
|
</div>
|
|
<div className="ltc-item">
|
|
<div className="new-item">生成时间</div><div className="new-value">{ycddData.payment_create_time}</div>
|
|
</div>
|
|
<div className="ltc-item">
|
|
<div className="new-item">支付时间</div><div className="new-value">{ycddData.pay_time}</div>
|
|
</div>
|
|
<div className="ltc-item">
|
|
<div className="new-item">支付渠道</div><div className="new-value">{ycddData.payment_equipment}</div>
|
|
</div>
|
|
<div className="ltc-item">
|
|
<div className="new-item">优惠金额</div><div className="new-value">{ycddData.discount_amount}</div>
|
|
</div>
|
|
<div className="ltc-item">
|
|
<div className="new-item">支付应用</div><div className="new-value">{ycddData.payment_equipment}</div>
|
|
</div>
|
|
<div className="ltc-item">
|
|
<div className="new-item">实付金额</div><div className="new-value">{ycddData.paid_in_money}</div>
|
|
</div>
|
|
</div>
|
|
<div className="ltc-box-title"><div className="text">停车订单:{ycddData.park_record_id}</div><div className="line"></div></div>
|
|
<div className="ltc-box-title"><div className="text">车厂详情</div></div>
|
|
<div className="ltc-content">
|
|
<div className="ltc-item">
|
|
<div className="new-item">平台商户</div><div className="new-value">{ycddData.payment_operator_name}</div>
|
|
</div>
|
|
<div className="ltc-item">
|
|
<div className="new-item">停车场名称</div><div className="new-value">{ycddData?.road_name}</div>
|
|
</div>
|
|
<div className="ltc-item">
|
|
<div className="new-item">区域</div><div className="new-value">{ycddData.area_name}</div>
|
|
</div>
|
|
<div className="ltc-item">
|
|
<div className="new-item">商户名称</div><div className="new-value">{ycddData.park_operator_name}</div>
|
|
</div>
|
|
<div className="ltc-item">
|
|
<div className="new-item">泊位号</div><div className="new-value">{ycddData.berth_code}</div>
|
|
</div>
|
|
<div className="ltc-item">
|
|
<div className="new-item">车场类型</div><div className="new-value">{ycddData.road_type}</div>
|
|
</div>
|
|
</div>
|
|
<div className="ltc-box-title"><div className="text">车辆详情</div></div>
|
|
<div className="ltc-content">
|
|
<div className="ltc-item">
|
|
<div className="new-item">车牌号</div><div className="new-value">{ycddData.plate_number}</div>
|
|
</div>
|
|
<div className="ltc-item">
|
|
<div className="new-item">停车时长</div><div className="new-value">{ycddData.parking_duration}</div>
|
|
</div>
|
|
<div className="ltc-item">
|
|
<div className="new-item">入场时间</div><div className="new-value">{ycddData.in_time}</div>
|
|
</div>
|
|
<div className="ltc-item">
|
|
<div className="new-item">出场时间</div><div className="new-value">{ycddData.out_time}</div>
|
|
</div>
|
|
<div className="ltc-item">
|
|
<div className="new-item">入场记录来源</div><div className="new-value">{ycddData.inSource}</div>
|
|
</div>
|
|
<div className="ltc-item">
|
|
<div className="new-item">出场记录来源</div><div className="new-value">{ycddData.outSource}</div>
|
|
</div>
|
|
<div className="ltc-item">
|
|
<div className="new-item">证据图像</div><div className="new-value"><a onClick={() => { setEaeVisible(true) }}>查看</a></div>
|
|
</div>
|
|
</div>
|
|
</>}
|
|
|
|
|
|
|
|
</div>
|
|
|
|
//停车卡详情
|
|
const tckModal = <div className="ltc-box">
|
|
<div className="ltc-box-title">订单信息:</div>
|
|
<div className="ltc-box-line"></div>
|
|
<Descriptions title="">
|
|
<Descriptions.Item label="订单状态">{ycddData?.t || "--"}</Descriptions.Item>
|
|
<Descriptions.Item label="支付时间">{ycddData.r || "--"}</Descriptions.Item>
|
|
<Descriptions.Item label="车牌号">{ycddData.o || "--"}</Descriptions.Item>
|
|
<Descriptions.Item label="车牌颜色">{ycddData.r || "--"}</Descriptions.Item>
|
|
<Descriptions.Item label="手机号">{ycddData.mobile || "--"}</Descriptions.Item>
|
|
<Descriptions.Item label="购买渠道">{ycddData.r || "--"}</Descriptions.Item>
|
|
<Descriptions.Item label="实付金额">{ycddData.r || "--"}</Descriptions.Item>
|
|
<Descriptions.Item label="支付渠道">{ycddData.r || "--"}</Descriptions.Item>
|
|
<Descriptions.Item label="支付设备">{ycddData.r || "--"}</Descriptions.Item>
|
|
</Descriptions>
|
|
<div className="ltc-box-title">商品信息:</div>
|
|
<div className="ltc-box-line"></div>
|
|
<Descriptions title="">
|
|
<Descriptions.Item label="商品名称">{ycddData.plate}</Descriptions.Item>
|
|
<Descriptions.Item label="商户名称">{ycddData.admission_time}</Descriptions.Item>
|
|
<Descriptions.Item label="适用范围">{ycddData.in_time}</Descriptions.Item>
|
|
<Descriptions.Item label="生效开始日期">{ycddData.out_time}</Descriptions.Item>
|
|
<Descriptions.Item label="有效天数">{ycddData.in_source}</Descriptions.Item>
|
|
<Descriptions.Item label="生效结束日期">{ycddData.out_source}</Descriptions.Item>
|
|
<Descriptions.Item label="实付金额"></Descriptions.Item>
|
|
</Descriptions>
|
|
</div>
|
|
|
|
//错峰卡详情
|
|
const cfkModal = <div className="ltc-box">
|
|
<div className="ltc-box-title">订单信息:</div>
|
|
<div className="ltc-box-line"></div>
|
|
<Descriptions title="">
|
|
<Descriptions.Item label="停车场名称">{ycddData?.road || "--"}</Descriptions.Item>
|
|
<Descriptions.Item label="手机号">{ycddData.mobile || "--"}</Descriptions.Item>
|
|
<Descriptions.Item label="车牌号">{ycddData.plate_number || "--"}</Descriptions.Item>
|
|
<Descriptions.Item label="同步MS状态">{ycddData.r || "--"}</Descriptions.Item>
|
|
<Descriptions.Item label="订购时间">{ycddData.r || "--"}</Descriptions.Item>
|
|
<Descriptions.Item label="支付方式">{ycddData.r || "--"}</Descriptions.Item>
|
|
<Descriptions.Item label="订单金额">{ycddData.r || "--"}</Descriptions.Item>
|
|
</Descriptions>
|
|
<div className="ltc-box-title">商品信息:</div>
|
|
<div className="ltc-box-line"></div>
|
|
<Descriptions title="">
|
|
<Descriptions.Item label="销售金额">{ycddData.plate}</Descriptions.Item>
|
|
<Descriptions.Item label="有效时间">{ycddData.admission_time}</Descriptions.Item>
|
|
</Descriptions>
|
|
</div>
|
|
useEffect(() => {
|
|
searchOther()
|
|
}, [tabKey])
|
|
|
|
return (
|
|
<>
|
|
{tag == 1 ?
|
|
<TableModule
|
|
columns={columns}
|
|
tableData={resultData}
|
|
formSearch={formSearch}
|
|
total={total}
|
|
search={search}
|
|
rowKey={(record) => record.id}
|
|
/> :
|
|
<>
|
|
<div className="back-btn" onClick={() => { setTag('1') }}>返回</div>
|
|
<Tabs activeKey={tabKey} onChange={changeKey}>
|
|
<Tabs.TabPane tab="基本信息" key="1">
|
|
{renderRecord(detailData)}
|
|
</Tabs.TabPane>
|
|
<Tabs.TabPane tab="停车记录" key="2">
|
|
{renderTable(
|
|
createCol(['序号', '区域', '商户名称', '停车场名称', '车场类型', '车牌号', '泊位号', '入场时间', '离场时间', '停车时长', '应收金额', '优惠金额', '实收金额'],
|
|
['index', 'region', 'operator', 'road', 'road_type', 'plate', 'berth_id', 'in_time', 'out_time', 'admission_time', 'receivable_amount', 'preferential_amount', 'actual_amount'], 2),
|
|
[ash[0], ash[1], ash[2], ash[3], ash[4], ash[5], ash[12]],
|
|
resultData
|
|
)}
|
|
</Tabs.TabPane>
|
|
<Tabs.TabPane tab="欠费记录" key="3">
|
|
{renderTable(
|
|
createCol(['商户名称', '区域', '停车场名称', '车牌号', '入场时间', '出场时间', '欠费金额'],
|
|
['merchantName', 'area', 'sectionName', 'licensePlateNumber', 'entryTime', 'exitTime', 'arrearsAmount'], 3),
|
|
[ash[0], ash[1], ash[2], ash[3], ash[5], ash[12]],
|
|
resultData
|
|
)}
|
|
</Tabs.TabPane>
|
|
<Tabs.TabPane tab="支付记录" key="4">
|
|
{renderTable(
|
|
createCol(['订单ID', '停车场名称', '车牌号', '泊位号', '入场时间', '计费时间', '停车时长', '应收金额', '优惠金额', '实收金额', '支付渠道', '支付设备', '操作人', '付款车场', '支付时间', '第三方流水ID'],
|
|
['order_id', 'road', 'plate', 'berth_id', 'admission_time', 'charging_time', 'parking_duration', 'receivable_amount', 'discount_amount', 'paid_in_money', 'payment_channels', 'payment_equipment', 'dealer', 'pay_road', 'pay_time', 'third_party_flow_id'], 4),
|
|
[ash[2], ash[9], ash[10], ash[15]],
|
|
resultData
|
|
)}
|
|
</Tabs.TabPane>
|
|
<Tabs.TabPane tab="退费订单" key="5">
|
|
{renderTable(
|
|
createCol(['序号', '最近尝试时间', '支付渠道', '应退实付（元）', '应退优惠（元）', '退款原因', '退款申请时间', '退款订单ID', '业务订单类型', '业务订单ID', '支付订单类型', '支付订单ID', '渠道流水号', '状态'],
|
|
['index', 'latest_try_time', 'payment_channels_name', 'refund_actual_amount', 'refund_discount_amount', 'reason', 'refund_time', 'payment_order_id', 'parking_type_name', 'park_record_id', 'payment_type_name', 'payment_order_id', 'flow_id', 'state_name'], 5),
|
|
formRefundSearch,
|
|
resultData
|
|
)}
|
|
</Tabs.TabPane>
|
|
<Tabs.TabPane tab="停车卡购买记录" key="6">
|
|
{renderTable(
|
|
createCol(['车牌号', '车辆颜色', '手机号', '商户名称', '实付金额', '支付渠道', '支付设备', '购买渠道', '支付时间', '订单状态'],
|
|
['plate', '', 'phone', 'operator', 'actual_amount', '', '', '', '', ''], 6),
|
|
[ash[4], ash[6], ash[7], ash[8], ash[9], ash[10], ash[15]],
|
|
resultData
|
|
)}
|
|
</Tabs.TabPane>
|
|
<Tabs.TabPane tab="错峰卡购买记录" key="7">
|
|
{renderTable(
|
|
createCol(['序号', '停车场名称', '车牌号', '手机号', '订单金额', '支付方式', '同步MS状态', '订购状态'],
|
|
['index', 'road', 'plate', 'phone', 'order_amount', '', '', ''], 7),
|
|
[ash[2], ash[4], ash[11], ash[16]],
|
|
resultData
|
|
)}
|
|
</Tabs.TabPane>
|
|
<Tabs.TabPane tab="预约处理" key="8">
|
|
<Tabs defaultActiveKey="1">
|
|
<Tabs.TabPane tab="预约订单" key="1">
|
|
{renderTable(
|
|
createCol(['序号', '车牌号', '手机号', '停车场名称', '实付金额', '支付方式', '下单时间', '订单状态', '第三方流水号'],
|
|
['index', 'plate', 'phone', 'road', 'actual_amount', '', '', ''], 8),
|
|
[ash[4], ash[2], ash[17], ash[11], ash[14], ash[15], ash[8]],
|
|
resultData
|
|
)}
|
|
</Tabs.TabPane>
|
|
<Tabs.TabPane tab="预约订单退款" key="2">
|
|
{renderTable(
|
|
createCol(['序号', '车牌号', '手机号', '停车场名称', '预约到场时间', '实付金额', '退款金额', '退款方式', '退款时间', '第三方流水号'],
|
|
['index', 'plate', 'phone', 'road', '', 'actual_amount', 'refund_total', '', '', ''], 9),
|
|
[ash[4], ash[2], ash[12], ash[13], ash[12], ash[14]],
|
|
resultData
|
|
)}
|
|
</Tabs.TabPane>
|
|
</Tabs>
|
|
</Tabs.TabPane>
|
|
</Tabs>
|
|
|
|
</>
|
|
}
|
|
<Modal
|
|
open={detailVisible}
|
|
width={1500}
|
|
onCancel={() => {
|
|
setDetailVisible(false);
|
|
}}
|
|
footer={null}
|
|
>
|
|
<Tabs >
|
|
<Tabs.TabPane tab="停车记录信息" key="1">
|
|
{/* {renderParkRecord(detailData)} */}
|
|
{renderParkRecord(ycddData)}
|
|
</Tabs.TabPane>
|
|
<Tabs.TabPane tab="历史处理" key="2">
|
|
{/* {renderModalTable(payRecordColumns, payRecord)} */}
|
|
</Tabs.TabPane>
|
|
</Tabs>
|
|
</Modal>
|
|
<Modal
|
|
open={bigpicVisible}
|
|
width={1600}
|
|
title={'图片展示'}
|
|
className="eae-modal"
|
|
onCancel={() => {
|
|
setBigpicVisible(false);
|
|
}}
|
|
footer={false}
|
|
>
|
|
<div>
|
|
<div className="eae-modal-item">
|
|
<img src={bigPic} width={1550} />
|
|
</div>
|
|
</div>
|
|
</Modal>
|
|
<Modal
|
|
open={tkddVisible}
|
|
width={1500}
|
|
title={'订单详情'}
|
|
onCancel={() => {
|
|
setTkddVisible(false);
|
|
}}
|
|
footer={[
|
|
<Button key="back" onClick={() => {
|
|
setTkddVisible(false);
|
|
}}>
|
|
关闭窗口
|
|
</Button>]}
|
|
>
|
|
{/* {tkddModal} */}
|
|
{tabKey == '5' ? tkddModal : tabKey == '6' ? tckModal : tabKey == '7' ? cfkModal : null}
|
|
|
|
</Modal>
|
|
<Modal
|
|
open={eaeVisible}
|
|
width={1600}
|
|
title={'证据图像'}
|
|
className="eae-modal"
|
|
onCancel={() => {
|
|
setEaeVisible(false);
|
|
}}
|
|
footer={false}
|
|
>
|
|
<div>
|
|
<div className="eae-modal-title"><div className="ltc-icon"></div>入场图片</div>
|
|
<div className="eae-modal-item">
|
|
<div>车辆照片</div>
|
|
<img src={ycddData.in_veh_pic} width={750} />
|
|
</div>
|
|
<div className="eae-modal-item">
|
|
<div>车牌照片</div>
|
|
<img src={ycddData.in_plate_pic} width={750} />
|
|
</div>
|
|
</div>
|
|
</Modal>
|
|
</>
|
|
);
|
|
}
|
|
|
|
export default CarInfo;
|