233 lines
8.3 KiB
233 lines
8.3 KiB
import React, { useState, useEffect } from "react";
|
|
import {
|
|
Modal,
|
|
Form,
|
|
Input,
|
|
Select,
|
|
Button,
|
|
Row,
|
|
Col,
|
|
Divider,
|
|
Checkbox,
|
|
Descriptions,
|
|
Radio,
|
|
} from "antd";
|
|
import EffectiveDate from "./EffectiveDate";
|
|
import ajax from "@/services";
|
|
function Detail(props) {
|
|
const { record, visible = false, close = () => { } } = props;
|
|
const [show ,setShow] = useState(visible)
|
|
const [form] = Form.useForm();
|
|
const [effectiveDateList, setEffectiveDateList] = useState(record.property);
|
|
console.log(effectiveDateList)
|
|
useEffect(() => {
|
|
setEffectiveDateList(record.property);
|
|
console.log(444455,record);
|
|
}, []);
|
|
return (
|
|
<Modal
|
|
open={visible}
|
|
destroyOnClose
|
|
onCancel={close}
|
|
width={1200}
|
|
title="详情"
|
|
footer={null}
|
|
>
|
|
<div className="yisa-custom-scrollbar" style={{height: '600px', overflowY: 'auto', overflowX: 'hidden'}}>
|
|
<Descriptions column={2}>
|
|
<Descriptions.Item label="规则名称" span={1}>
|
|
{record.feeName}
|
|
</Descriptions.Item>
|
|
<Descriptions.Item label="编码" span={1}>
|
|
{record.feeCode}
|
|
</Descriptions.Item>
|
|
<Descriptions.Item label="描述" span={1}>
|
|
{record.description}
|
|
</Descriptions.Item>
|
|
<Descriptions.Item label="所属商户" span={1}>
|
|
{record.operationName}
|
|
</Descriptions.Item>
|
|
<Descriptions.Item label="操作时间" span={1}>
|
|
{record.createdTime}
|
|
</Descriptions.Item>
|
|
<Descriptions.Item label="14小时最大收费金额" span={1}>
|
|
{record.limit24hour}
|
|
</Descriptions.Item>
|
|
<Descriptions.Item label="免费分钟数" span={1}>
|
|
{record.freeTime}
|
|
<div style={{ margin: "0 10px" }}>
|
|
<Checkbox disabled defaultChecked={record.freeTimeAbleF}>
|
|
免费分钟数纳入计费时间
|
|
</Checkbox>
|
|
</div>
|
|
</Descriptions.Item>
|
|
<Descriptions.Item label="特殊车辆优惠" span={2}>
|
|
<Radio.Group
|
|
disabled
|
|
defaultValue={record.typeF}
|
|
options={[
|
|
{
|
|
label: "启用",
|
|
value: 1,
|
|
},
|
|
{
|
|
label: "禁用",
|
|
value: 0,
|
|
},
|
|
]}
|
|
/>
|
|
</Descriptions.Item>
|
|
<Descriptions.Item label="新能源车辆免费分钟" span={1}>
|
|
{record.evFreeTime}
|
|
<div style={{ margin: "0 10px" }}>
|
|
<Checkbox disabled defaultChecked={record.evFreeTimeAble}>
|
|
免费分钟数纳入计费时间
|
|
</Checkbox>
|
|
</div>
|
|
</Descriptions.Item>
|
|
</Descriptions>
|
|
<Divider />
|
|
{effectiveDateList &&
|
|
effectiveDateList.rules?.map((item, index) => {
|
|
console.log(item);
|
|
return <EffectiveDetail record={item} key={index} />
|
|
})
|
|
}
|
|
</div>
|
|
</Modal>
|
|
);
|
|
}
|
|
|
|
function EffectiveDetail(props) {
|
|
const { record } = props;
|
|
console.log(101,record)
|
|
return (
|
|
<div className="el-form">
|
|
<Descriptions column={2}>
|
|
<Descriptions.Item label="生效日期" span={1}>
|
|
{record.date}
|
|
</Descriptions.Item>
|
|
<Descriptions.Item span={2}>
|
|
<Checkbox.Group
|
|
defaultValue={[record.unitDelay ? 1 : -1, record.unitUp ? 2 : -1]}
|
|
disabled
|
|
options={[
|
|
{
|
|
label: "跨段延续计费",
|
|
value: 1,
|
|
},
|
|
{
|
|
label: "出场时不满计费单元部分补齐计费单元收费",
|
|
value: 2,
|
|
},
|
|
]}
|
|
></Checkbox.Group>
|
|
</Descriptions.Item>
|
|
</Descriptions>
|
|
{record.details.map((item, index) => {
|
|
return <TimePartDetail index={index + 1} record={item} />;
|
|
})}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function TimePartDetail(props) {
|
|
const { record, index } = props;
|
|
function partName(type) {
|
|
switch (type) {
|
|
case 0:
|
|
return "基础时段";
|
|
case 2:
|
|
return "周期计费";
|
|
case 1:
|
|
return "按次计费";
|
|
}
|
|
}
|
|
return (
|
|
<>
|
|
<Descriptions column={2}>
|
|
<Descriptions.Item label={`时段${index}`}>
|
|
{`${record.start}-${record.end}`}
|
|
</Descriptions.Item>
|
|
{record.itemss?.map((item, index) => {
|
|
{
|
|
(item.type === 0 || item.type === 2) && (
|
|
<Descriptions.Item label="时段最高金额">
|
|
{record.limit}
|
|
</Descriptions.Item>
|
|
)
|
|
}
|
|
<Descriptions.Item label={`区间${index}`} span={2}>
|
|
{partName(item.type)}
|
|
</Descriptions.Item>
|
|
{
|
|
item.type === 0 && (
|
|
<>
|
|
<Descriptions.Item span={2}>
|
|
{/* <div>{`前：${record.time_before} 分钟，${record.time_before_money}元/${record.time_before_minute}分钟`}</div> */}
|
|
<div>{`前：${items.segment} 分钟，${item.unit}元/${item.period}分钟`}</div>
|
|
</Descriptions.Item>
|
|
<Descriptions.Item span={2}>
|
|
{/* <div>{`满：${record.time_before} 分钟后，${record.time_after_money}元/${record.time_after_minute}分钟`}</div> */}
|
|
{item.sub ? <div>{`满：${record.items && record.item.segment} 分钟后，${record.items[0].sub[0].unit}元/${record.items[0].sub[0]?.period}分钟`}</div> : null}
|
|
</Descriptions.Item>
|
|
</>
|
|
)
|
|
}
|
|
{
|
|
record.type === 2 && (
|
|
<Descriptions.Item span={2}>
|
|
{/* <div>{`${record.time_money}元/${record.time_minute}分钟`}</div> */}
|
|
<div>{`${record.items && record.items[0].unit}元/${record.items && record.items[0].period}分钟`}</div>
|
|
</Descriptions.Item>
|
|
)
|
|
}
|
|
{
|
|
record.type === 1 && (
|
|
<Descriptions.Item span={2}>
|
|
{/* <div>{`${record.money_per_time}元/次`}</div> */}
|
|
<div>{`${record.items && record.items[0].unit}元/次`}</div>
|
|
</Descriptions.Item>
|
|
)
|
|
}
|
|
|
|
})}
|
|
{(record.type === 0 || record.type === 2) && (
|
|
<Descriptions.Item label="时段最高金额">
|
|
{record.limit}
|
|
</Descriptions.Item>
|
|
)}
|
|
<Descriptions.Item label={`区间${index}`} span={2}>
|
|
{partName(record.items[0].type)}
|
|
</Descriptions.Item>
|
|
{record.items[0].type === 0 && (
|
|
<>
|
|
<Descriptions.Item span={2}>
|
|
{/* <div>{`前：${record.time_before} 分钟，${record.time_before_money}元/${record.time_before_minute}分钟`}</div> */}
|
|
<div>{`前：${record.items && record.items[0].segment} 分钟，${record.items && record.items[0].unit}元/${record.items && record.items[0].period}分钟`}</div>
|
|
</Descriptions.Item>
|
|
<Descriptions.Item span={2}>
|
|
{/* <div>{`满：${record.time_before} 分钟后，${record.time_after_money}元/${record.time_after_minute}分钟`}</div> */}
|
|
{record.items && record.items[0].sub ? <div>{`满：${record.items && record.items[0].segment} 分钟后，${record.items[0].sub[0].unit}元/${record.items[0].sub[0]?.period}分钟`}</div> : null}
|
|
</Descriptions.Item>
|
|
</>
|
|
)}
|
|
{record.items[0].type === 2 && (
|
|
<Descriptions.Item span={2}>
|
|
{/* <div>{`${record.time_money}元/${record.time_minute}分钟`}</div> */}
|
|
<div>{`${record.items && record.items[0].unit}元/${record.items && record.items[0].period}分钟`}</div>
|
|
</Descriptions.Item>
|
|
)}
|
|
{record.items[0].type === 1 && (
|
|
<Descriptions.Item span={2}>
|
|
{/* <div>{`${record.money_per_time}元/次`}</div> */}
|
|
<div>{`${record.items && record.items[0].unit}元/次`}</div>
|
|
</Descriptions.Item>
|
|
)}
|
|
</Descriptions>
|
|
<Divider />
|
|
</>
|
|
);
|
|
}
|
|
|
|
export default Detail;
|