diff --git a/src/components/TableModule/index.jsx b/src/components/TableModule/index.jsx index de696ff..01264d9 100644 --- a/src/components/TableModule/index.jsx +++ b/src/components/TableModule/index.jsx @@ -12,7 +12,7 @@ import { DatePicker, Cascader, message, - Modal + Modal, } from "antd"; import { dictionary } from "@/config/common"; import ajax from "@/services"; @@ -29,15 +29,18 @@ function TableModule(props) { columns = [], //表头 tableData = [], //table的数据 formSearch = [], //左侧数据搜索项 - search = () => { }, //搜索按钮的回调函数 + search = () => {}, //搜索按钮的回调函数 total = 0, //总数据量 initFormData = {}, //初始化的表格搜索项 exportUrl = "", //导出的接口 + rowSelection = false, //自定义选择项 isExport = true, //是否显示导出按钮 + rightButtonGroup = [], //右侧按钮额外的展示，需要传入数组 otherData = {}, //额外需要携带的参数，传入对象 + rowKey, //table的key值 } = props; const [searchForm] = Form.useForm(); - const [tipForm] = Form.useForm() + const [tipForm] = Form.useForm(); const timeFlag = formSearch.filter((item) => { return item.type === "FormSliderPicker"; @@ -70,8 +73,11 @@ function TableModule(props) { //tip导出弹窗 const [tipModal, setTipModal] = useState({ visible: false, - filename: pagename + (new Date().getMonth() + 1).toString().padStart(2, '0') + new Date().getDate() - }) + filename: + pagename + + (new Date().getMonth() + 1).toString().padStart(2, "0") + + new Date().getDate(), + }); const [pageData, setPageData] = useSetState({ // 分页参数 pn: 1, @@ -97,17 +103,17 @@ function TableModule(props) { ...form, timeType: timeGroup.timeType, start_time: moment(timeGroup.timeRanges.start_time).format( - "YYYY-MM-DD hh:mm:ss" + "YYYY-MM-DD kk:mm:ss" ), end_time: moment(timeGroup.timeRanges.end_time).format( - "YYYY-MM-DD hh:mm:ss" + "YYYY-MM-DD kk:mm:ss" ), }; } if (areaName !== null) form[areaName] = areaSelectedList; if (form.start_time !== void 0 && form.end_time !== void 0) { - form.start_time = moment(form.start_time).format("YYYY-MM-DD hh:mm:ss"); - form.end_time = moment(form.end_time).format("YYYY-MM-DD hh:mm:ss"); + form.start_time = moment(form.start_time).format("YYYY-MM-DD kk:mm:ss"); + form.end_time = moment(form.end_time).format("YYYY-MM-DD kk:mm:ss"); } search(form); } @@ -204,24 +210,31 @@ function TableModule(props) { children = ( <> - + - + ); @@ -241,6 +254,17 @@ function TableModule(props) { ); + break; + case "__react_node": + children = ( + + {item.component()} + + ); } return ( @@ -262,50 +286,58 @@ function TableModule(props) { } const exportBtn = (filename) => { - let form = { ...searchForm.getFieldsValue(), ...pageData, ...otherData, export: filename }; + let form = { + ...searchForm.getFieldsValue(), + ...pageData, + ...otherData, + export: filename, + }; if (timeFlag) { form = { ...form, timeType: timeGroup.timeType, start_time: moment(timeGroup.timeRanges.start_time).format( - "YYYY-MM-DD hh:mm:ss" + "YYYY-MM-DD kk:mm:ss" ), end_time: moment(timeGroup.timeRanges.end_time).format( - "YYYY-MM-DD hh:mm:ss" + "YYYY-MM-DD kk:mm:ss" ), }; } if (areaName !== null) form[areaName] = areaSelectedList; if (form.start_time !== void 0 && form.end_time !== void 0) { - form.start_time = moment(form.start_time).format("YYYY-MM-DD hh:mm:ss"); - form.end_time = moment(form.end_time).format("YYYY-MM-DD hh:mm:ss"); + form.start_time = moment(form.start_time).format("YYYY-MM-DD kk:mm:ss"); + form.end_time = moment(form.end_time).format("YYYY-MM-DD kk:mm:ss"); } exportAjax({ url: exportUrl, type: "post", - data: form - }).then(res => { - if (res.status === 20000) { - const link = document.createElement("a"); - link.href = res.data.export_url; - link.target = "_blank"; // 打开新页面 - link.click(); - setTipModal({ ...tipModal, visible: false }) - } - else { - message.error(res.message) - } - }).catch(err => { - console.error(err) + data: form, }) - } + .then((res) => { + if (res.status === 20000) { + const link = document.createElement("a"); + link.href = res.data.export_url; + link.target = "_blank"; // 打开新页面 + link.click(); + setTipModal({ ...tipModal, visible: false }); + } else { + message.error(res.message); + } + }) + .catch((err) => { + console.error(err); + }); + }; function handleOk() { - tipForm.validateFields().then(res => { - exportBtn(res.filename) - }).catch(err => console.error(err)) + tipForm + .validateFields() + .then((res) => { + exportBtn(res.filename); + }) + .catch((err) => console.error(err)); } - useEffect(() => { getAllOperator(); }, []); @@ -350,8 +382,14 @@ function TableModule(props) { {total} 条结果 -
- +
+ {rightButtonGroup.map((item) => item)} +
- setTipModal({ ...tipModal, visible: false })} title="提示" onOk={handleOk}> + setTipModal({ ...tipModal, visible: false })} + title="提示" + onOk={handleOk} + >
- - + + + + {" "} + ); } function InputSelectGroup(params) { - const { onChange = () => { } } = params; + const { onChange = () => {} } = params; const [timeType, setTimeType] = useState(1); const [timeGroup, setTimeGroup] = useState({ start_time: moment().subtract(1, "day").format(), @@ -446,7 +499,6 @@ function InputSelectGroup(params) { /> - ); } diff --git a/src/components/TableModule/index.scss b/src/components/TableModule/index.scss index 4914002..71fa193 100644 --- a/src/components/TableModule/index.scss +++ b/src/components/TableModule/index.scss @@ -21,6 +21,12 @@ $color-primary: var(--color-primary); .table-wrap { height: calc(100% - 32px - 65px); } + .right-button-group { + display: flex; + button { + margin: 0 5px; + } + } .ant-tabs { margin-bottom: 16px; .ant-tabs-nav { @@ -91,16 +97,14 @@ $color-primary: var(--color-primary); .ant-select-selection-placeholder { color: var(--color-placeholder); } - .ant-select-disabled.ant-select-single:not(.ant-select-customize-input) - .ant-select-selector { + .ant-select-disabled.ant-select-single:not(.ant-select-customize-input) .ant-select-selector { background: var(--color-input-disabled-bg); color: var(--color-placeholder); } .ant-select-disabled .ant-select-arrow { color: var(--color-placeholder); } - .ant-select-disabled.ant-select:not(.ant-select-customize-input) - .ant-select-selector { + .ant-select-disabled.ant-select:not(.ant-select-customize-input) .ant-select-selector { background-color: var(--color-input-disabled-bg); color: var(--color-input-disabled-color); cursor: not-allowed; diff --git a/src/pages/OutRoadMgm/OutBusinessRecord/OutParkingRecordInquiry/Detail/RecordList.jsx b/src/pages/OutRoadMgm/OutBusinessRecord/OutParkingRecordInquiry/Detail/RecordList.jsx new file mode 100644 index 0000000..f79c67f --- /dev/null +++ b/src/pages/OutRoadMgm/OutBusinessRecord/OutParkingRecordInquiry/Detail/RecordList.jsx @@ -0,0 +1,93 @@ +import React, { useEffect, useState } from "react"; +import { Table } from "antd"; +import ajax from "@/services"; +function RecordList({ id }) { + const columns = [ + { + title: "序号", + dataIndex: "id", + key: "id", + render: (text, record, index) => index + 1, + }, + { + title: "订单ID", + dataIndex: "order_id", + key: "order_id", + }, + { + title: "入场时间", + dataIndex: "in_time", + key: "in_time", + }, + { + title: "出场时间", + dataIndex: "out_time", + key: "out_time", + }, + { + title: "应收金额", + dataIndex: "ys_money", + key: "ys_money", + }, + { + title: "优惠金额", + dataIndex: "yh_money", + key: "yh_money", + }, + { + title: "实收金额", + dataIndex: "sf_money", + key: "sf_money", + }, + { + title: "支付类型", + dataIndex: "pay_type_name", + key: "pay_type_name", + }, + { + title: "支付渠道", + dataIndex: "payment_type_name", + key: "payment_type_name", + }, + { + title: "支付设备", + dataIndex: "payment_device_name", + key: "payment_device_name", + }, + { + title: "支付人", + dataIndex: "car_owner_name", + key: "car_owner_name", + }, + { + title: "付款车场", + dataIndex: "park_name", + key: "park_name", + }, + { + title: "第三方流水ID", + dataIndex: "third_party_flow_id", + key: "third_party_flow_id", + }, + ]; + const [dataSource, setDataSource] = useState([]); + function getList() { + ajax.showPayList({ id }).then((res) => { + if (res.status === 20000) { + setDataSource(res.data.list); + } + }); + } + useEffect(() => { + getList(); + }, []); + return ( +
+ ); +} + +export default RecordList; diff --git a/src/pages/OutRoadMgm/OutBusinessRecord/OutParkingRecordInquiry/Detail/RefundList.jsx b/src/pages/OutRoadMgm/OutBusinessRecord/OutParkingRecordInquiry/Detail/RefundList.jsx new file mode 100644 index 0000000..32c14c2 --- /dev/null +++ b/src/pages/OutRoadMgm/OutBusinessRecord/OutParkingRecordInquiry/Detail/RefundList.jsx @@ -0,0 +1,75 @@ +import React, { useEffect, useState } from "react"; +import { Table } from "antd"; +import ajax from "@/services"; +function RefundList({ id }) { + const columns = [ + { + title: "序号", + dataIndex: "id", + key: "id", + render: (text, record, index) => index + 1, + }, + { + title: "退款方式", + dataIndex: "refund_type", + key: "refund_type", + }, + { + title: "支付渠道", + dataIndex: "payment_type_name", + key: "payment_type_name", + }, + + { + title: "支付设备", + dataIndex: "payment_device_name", + key: "payment_device_name", + }, + { + title: "退款原因", + dataIndex: "reason", + key: "reason", + }, + { + title: "退款金额", + dataIndex: "refund_amount", + key: "refund_amount", + }, + { + title: "申请人", + dataIndex: "application_person", + key: "application_person", + }, + + { + title: "申请时间", + dataIndex: "application_time", + key: "application_time", + }, + { + title: "退款时间", + dataIndex: "refund_time", + key: "refund_time", + }, + ]; + const [dataSource, setDataSource] = useState([]); + function getList() { + ajax.showRefoundList({ id }).then((res) => { + if (res.status === 20000) { + setDataSource(res.data.list); + } + }); + } + useEffect(() => { + getList(); + }, []); + return ( +
+ ); +} + +export default RefundList; diff --git a/src/pages/OutRoadMgm/OutBusinessRecord/OutParkingRecordInquiry/Detail/StopList.jsx b/src/pages/OutRoadMgm/OutBusinessRecord/OutParkingRecordInquiry/Detail/StopList.jsx new file mode 100644 index 0000000..6e6b39e --- /dev/null +++ b/src/pages/OutRoadMgm/OutBusinessRecord/OutParkingRecordInquiry/Detail/StopList.jsx @@ -0,0 +1,75 @@ +import React, { useState, useEffect } from "react"; +import ajax from "@/services"; +import { message, Descriptions, Image } from "antd"; +function StopList({ id }) { + //获取停车记录 + const [recordData, setRecordData] = useState({}); + + function getRecord() { + ajax.showStopList({ id }).then((res) => { + if (res.status === 20000) { + setRecordData(res.data.list[0]); + } else { + message.error(res.message); + } + }); + } + + useEffect(() => { + getRecord(); + }, []); + return ( +
+ + + {recordData.park_name} + + + {recordData.area_name} + + + {recordData.shop_name} + + + {recordData.road_type_name} + + + + + {recordData.plate_num} + + + {recordData.phone} + + + {recordData.in_time} + + + {recordData.out_time} + + + {recordData.parking_time} + + + {recordData.ys_money} + + + {recordData.yh_money} + + + {recordData.sf_money} + + + + + + + + + + +
+ ); +} + +export default StopList; diff --git a/src/pages/OutRoadMgm/OutBusinessRecord/OutParkingRecordInquiry/Detail/index.jsx b/src/pages/OutRoadMgm/OutBusinessRecord/OutParkingRecordInquiry/Detail/index.jsx new file mode 100644 index 0000000..33d1b80 --- /dev/null +++ b/src/pages/OutRoadMgm/OutBusinessRecord/OutParkingRecordInquiry/Detail/index.jsx @@ -0,0 +1,48 @@ +import React, { useEffect, useState } from "react"; +import { Modal, message, Tabs } from "antd"; +import ajax from "@/services"; +import StopList from "./StopList"; +import RecordList from "./RecordList"; +import RefundList from "./RefundList"; +import "./index.scss"; +function Detail(props) { + const { visible = false, close = () => {}, onOk = () => {}, id } = props; + //tabs数据 + const tabsItems = [ + { + label: "停车记录", + key: "1", + children: , + }, + { + label: "支付记录", + key: "2", + children: , + }, + { + label: "退款订单", + key: "3", + children: , + }, + ]; + //tabs的key + const [tabsKey, setTabsKey] = useState("1"); + function tabsChange(value) { + setTabsKey(value); + } + useEffect(() => {}, []); + return ( + + + + ); +} + +export default Detail; diff --git a/src/pages/OutRoadMgm/OutBusinessRecord/OutParkingRecordInquiry/Detail/index.scss b/src/pages/OutRoadMgm/OutBusinessRecord/OutParkingRecordInquiry/Detail/index.scss new file mode 100644 index 0000000..e27632a --- /dev/null +++ b/src/pages/OutRoadMgm/OutBusinessRecord/OutParkingRecordInquiry/Detail/index.scss @@ -0,0 +1,73 @@ +.ant-tabs { + margin-bottom: 16px; + + .ant-tabs-nav { + margin-bottom: 0 !important; + + &::before { + border-bottom: 1px solid var(--color-card-line) !important; + } + } + + .ant-tabs-nav-wrap { + width: 100%; + box-sizing: content-box; + + .ant-tabs-nav-list { + width: 340px; + + .ant-tabs-ink-bar { + height: 3px; + background-color: #00ccff; + } + + .ant-tabs-tab { + flex: 1; + width: 100%; + display: flex; + justify-content: center; + padding-bottom: 10px; + text-align: center; + cursor: pointer; + font-size: 14px !important; + font-family: MicrosoftYaHei; + text-align: center; + letter-spacing: 0.7px; + } + + .ant-tabs-tab-active { + div { + color: #00ccff; + } + } + } + } +} +.yisa-table { + width: 100%; + + .ant-table-thead { + th { + background: var(--color-table-header-bg) !important; + } + } + + .ant-table-tbody { + td { + background: var(--color-table-body-bg) !important; + border-bottom-color: var(--color-table-border-bottom-color); + } + + tr:nth-child(even) { + td { + background: var(--color-table-body-bg-nth-child-even) !important; + } + } + + tr:nth-child(odd) { + td { + background: var(--color-table-body-bg-nth-child-even) !important; + } + } + } +} diff --git a/src/pages/OutRoadMgm/OutBusinessRecord/OutParkingRecordInquiry/loadable.jsx b/src/pages/OutRoadMgm/OutBusinessRecord/OutParkingRecordInquiry/loadable.jsx index b631a8d..500e209 100644 --- a/src/pages/OutRoadMgm/OutBusinessRecord/OutParkingRecordInquiry/loadable.jsx +++ b/src/pages/OutRoadMgm/OutBusinessRecord/OutParkingRecordInquiry/loadable.jsx @@ -1,15 +1,184 @@ import React, { useState, useRef, useEffect } from "react"; -// import { message, Pagination, Table, Space, Modal, } from "antd"; +import { message, Pagination, Table, Space, Modal, Button } 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 ajax from "@/services"; +import { TableModule } from "@/components"; +import "./index.scss"; +import Detail from "./Detail"; function OutParkingRecordInquiry() { - return
OutParkingRecordInquiry
+ const columns = [ + { + title: "序号", + dataIndex: "id", + key: "id", + }, + { + title: "区域", + dataIndex: "area", + key: "area", + }, + { + title: "商户名称", + dataIndex: "merchantName", + key: "merchantName", + }, + { + title: "停车场名称", + dataIndex: "parkingLotName", + key: "parkingLotName", + }, + { + title: "车场类型", + dataIndex: "parkingLotType", + key: "parkingLotType", + }, + { + title: "车牌号", + dataIndex: "licensePlate", + key: "licensePlate", + }, + { + title: "泊位号", + dataIndex: "berthNumber", + key: "berthNumber", + }, + { + title: "入场时间", + dataIndex: "entryTime", + key: "entryTime", + }, + { + title: "离场时间", + dataIndex: "exitTime", + key: "exitTime", + }, + { + title: "停车时长", + dataIndex: "parkingDuration", + key: "parkingDuration", + }, + { + title: "应收金额", + dataIndex: "receivableAmount", + key: "receivableAmount", + }, + { + title: "实收金额", + dataIndex: "actualAmount", + key: "actualAmount", + }, + { + title: "操作", + dataIndex: "operation", + key: "operation", + render: (_, record) => ( + + ), + }, + ]; + const formSearch = [ + { + name: "region", + type: "TreeSelect", + label: "区域", + }, + { + name: "operator", + type: "Select", + label: "商户名称", + placeholder: "请选择商户名称", + }, + { + name: "parking_lot", + type: "Input", + label: "停车场名称", + placeholder: "请选择停车场名称", + }, + { + name: "plate", + type: "Input", + label: "车牌号", + placeholder: "请输入车牌号", + }, + { + name: "type", + type: "Select", + label: "出入场类型", + options: [ + { + label: "出场", + value: 1, + }, + { + label: "入场", + value: 2, + }, + ], + defaultValue: 2, + }, + { + name: "time", + type: "RangePicker", + label: "时间段", + }, + ]; + //搜索参数初始化 + const initFormData = {}; + + //搜索的结果 + const [tableData, setTableData] = useState([]); + //搜索的总结果数 + const [total, setTotal] = useState(0); + const [detailModal, setDetailModal] = useState({ + id: "", + visible: false, + close: () => setDetailModal({ ...detailModal, visible: false }), + onOk: () => { + detailModal.close(); + }, + }); + + function fetch(params) { + ajax.getRecordList(params).then((res) => { + if (res.status === 20000) { + setTableData(res.data.list); + setTotal(res.data.total); + } + }); + } + + return ( + <> + + + + ); } -export default OutParkingRecordInquiry; \ No newline at end of file +export default OutParkingRecordInquiry; diff --git a/src/pages/OutRoadMgm/OutSegmentMgm/ChargeRulesMgm/loadable.jsx b/src/pages/OutRoadMgm/OutSegmentMgm/ChargeRulesMgm/loadable.jsx index 938718b..1c18f1c 100644 --- a/src/pages/OutRoadMgm/OutSegmentMgm/ChargeRulesMgm/loadable.jsx +++ b/src/pages/OutRoadMgm/OutSegmentMgm/ChargeRulesMgm/loadable.jsx @@ -1,15 +1,106 @@ import React, { useState, useRef, useEffect } from "react"; -// import { message, Pagination, Table, Space, Modal, } from "antd"; +import { message, Pagination, Table, Space, Modal, Button } 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 ajax from "@/services"; +import { TableModule } from "@/components"; +import "./index.scss"; function ChargeRulesMgm() { - return
ChargeRulesMgm
+ const columns = [ + { + title: "商户名称", + dataIndex: "merchantName", + key: "merchantName", + }, + { + title: "规则名称", + dataIndex: "ruleName", + key: "ruleName", + }, + { + title: "规则编码", + dataIndex: "ruleCode", + key: "ruleCode", + }, + { + title: "创建人", + dataIndex: "creator", + key: "creator", + }, + { + title: "更新时间", + dataIndex: "updateTime", + key: "updateTime", + }, + { + title: "描述", + dataIndex: "description", + key: "description", + }, + { + title: "操作", + dataIndex: "operation", + key: "operation", + render: () => Edit, + }, + ]; + const formSearch = [ + { + name: "rule_name", + type: "Input", + label: "规则名称", + placeholder: "请输入规则名称", + }, + { + name: "rule_code", + type: "Input", + label: "规则编码", + placeholder: "请输入规则编码", + }, + { + name: "operator", + type: "Select", + label: "商户名称", + placeholder: "请选择商户名称", + }, + ]; + //搜索参数初始化 + const initFormData = { + region: null, + type: 2, + operator: null, + road: "", + road_type: 0, + plate: "", + }; + + //搜索的结果 + const [tableData, setTableData] = useState([]); + //搜索的总结果数 + const [total, setTotal] = useState(0); + + function fetch(params) { + ajax.getParkingArrearsList(params).then((res) => { + if (res.status === 20000) { + setTableData(res.data.list); + setTotal(res.data.total); + } + }); + } + + return ( + + ); } -export default ChargeRulesMgm; \ No newline at end of file +export default ChargeRulesMgm; diff --git a/src/pages/OutRoadMgm/OutSegmentMgm/OutSegment/ConfigParking/BusinessParameterConfig.jsx b/src/pages/OutRoadMgm/OutSegmentMgm/OutSegment/ConfigParking/BusinessParameterConfig.jsx index 68c2654..97cba4a 100644 --- a/src/pages/OutRoadMgm/OutSegmentMgm/OutSegment/ConfigParking/BusinessParameterConfig.jsx +++ b/src/pages/OutRoadMgm/OutSegmentMgm/OutSegment/ConfigParking/BusinessParameterConfig.jsx @@ -1,106 +1,147 @@ -import React from 'react' -import { Button, Form, Radio, Input, Select, Row, Col } from 'antd' -import './BusinessParameterConfig.scss' -function BusinessParameterConfig() { - return ( -
-
-

出入场配置

-
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + - + - + - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
); } diff --git a/src/pages/OutRoadMgm/OutSegmentMgm/OutSegment/ConfigParking/CarMgm/CarGroupMgm.jsx b/src/pages/OutRoadMgm/OutSegmentMgm/OutSegment/ConfigParking/CarMgm/CarGroupMgm.jsx index 2a14168..e20cbf3 100644 --- a/src/pages/OutRoadMgm/OutSegmentMgm/OutSegment/ConfigParking/CarMgm/CarGroupMgm.jsx +++ b/src/pages/OutRoadMgm/OutSegmentMgm/OutSegment/ConfigParking/CarMgm/CarGroupMgm.jsx @@ -1,6 +1,21 @@ -import React from "react"; -import { Form, Select, Row, Col, Table, Button } from "antd"; -function CarGroupMgm() { +import React, { useEffect, useState } from "react"; +import { + Form, + Select, + Row, + Col, + Table, + Button, + message, + Modal, + Input, +} from "antd"; +import ajax from "@/services"; +import { dictionary, utils } from "@/config/common"; +const { TextArea } = Input; +function CarGroupMgm({ id }) { + const [searchForm] = Form.useForm(); + const [editForm] = Form.useForm(); const columns = [ { title: "车辆组名称", @@ -10,26 +25,26 @@ function CarGroupMgm() { }, { title: "车辆类型", - dataIndex: "type", - key: "type", - align: "center", - }, - { - title: "同步状态", - dataIndex: "tb_status", - key: "tb_status", + dataIndex: "vehicle_type", + key: "vehicle_type", align: "center", }, + // [ + // title: "同步状态", + // dataIndex: "status_name", + // key: "status_name", + // align: "center", + // ], { title: "状态", - dataIndex: "status", - key: "status", + dataIndex: "status_name", + key: "status_name", align: "center", }, { title: "描述", - dataIndex: "description", - key: "description", + dataIndex: "note", + key: "note", align: "center", }, { @@ -37,31 +52,149 @@ function CarGroupMgm() { dataIndex: "operation", key: "operation", align: "center", - render: () => { - return ; + render: (_, record) => { + return ( + + ); }, }, ]; + const [carGroup, setCarGroup] = useState([]); + const [carList, setCarList] = useState([]); + const [editModal, setEditModal] = useState({ + visible: false, + data: {}, + }); + const [pageData, setPageData] = useState({ + pn: 1, + page_size: 10, + total: 0, + }); + const getVehicleGroup = () => { + const params = { ...searchForm.getFieldsValue(), ...pageData }; + ajax + .getRoadVehicleGroup(params) + .then((res) => { + if (res.status === 20000) { + setCarList(res.data.list); + } else { + message.error(res.message); + } + }) + .catch((err) => { + console.log(err); + }); + }; + + function changePage(pn, page_size) { + setPageData({ + pn, + page_size, + }); + } + + useEffect(() => { + ajax + .getAllCarGroup({ road_id: id }) + .then((res) => { + if (res.status === 20000) { + setCarGroup(res.data); + } else { + message.error(res.message); + } + }) + .catch((err) => { + console.log(err); + }); + }, []); + + useEffect(() => { + getVehicleGroup(); + }, [pageData]); return (
-
+ - - - -
- - + +
@@ -69,8 +202,58 @@ function CarGroupMgm() {
- +
+ {/* 编辑和新增弹窗 */} + setEditModal({ visible: false })} + width={1000} + > +
+ + + + + + + + + + + + + + + + + + + ); } diff --git a/src/pages/OutRoadMgm/OutSegmentMgm/OutSegment/ConfigParking/CarMgm/WhitelistManagement.jsx b/src/pages/OutRoadMgm/OutSegmentMgm/OutSegment/ConfigParking/CarMgm/WhitelistManagement.jsx index 5fde300..7644e51 100644 --- a/src/pages/OutRoadMgm/OutSegmentMgm/OutSegment/ConfigParking/CarMgm/WhitelistManagement.jsx +++ b/src/pages/OutRoadMgm/OutSegmentMgm/OutSegment/ConfigParking/CarMgm/WhitelistManagement.jsx @@ -1,6 +1,25 @@ -import React from "react"; -import { Form, Select, Row, Col, Table, Button, Input } from "antd"; +import React, { useState, useEffect } from "react"; +import { + Form, + Select, + Row, + Col, + Table, + Button, + message, + Input, + Modal, + Popover, + DatePicker, +} from "antd"; +import { dictionary, utils } from "@/config/common"; +import moment from "moment"; +import ajax from "@/services"; +const { RangePicker } = DatePicker; +const { TextArea } = Input; function WhitelistManagement() { + const [searchForm] = Form.useForm(); + const [editForm] = Form.useForm(); const columns = [ { title: "序号", @@ -11,32 +30,50 @@ function WhitelistManagement() { }, { title: "车牌号", - dataIndex: "licensePlate", - key: "licensePlate", + dataIndex: "plate", + key: "plate", + align: "center", + }, + { + title: "车主姓名", + dataIndex: "car_owner_name", + key: "car_owner_name", align: "center", }, { title: "手机号", - dataIndex: "phoneNumber", - key: "phoneNumber", + dataIndex: "phone", + key: "phone", align: "center", }, { - title: "订单金额", - dataIndex: "orderAmount", - key: "orderAmount", + title: "开始日期", + dataIndex: "effective_begin_date", + key: "effective_begin_date", align: "center", }, { - title: "同步MS状态", - dataIndex: "msSyncStatus", - key: "msSyncStatus", + title: "结束日期", + dataIndex: "effective_end_date", + key: "effective_end_date", align: "center", }, + // { + // title: "同步状态", + // dataIndex: "", + // key: "orderTime", + // align: "center", + // }, { - title: "订购时间", - dataIndex: "orderTime", - key: "orderTime", + title: "生效状态", + dataIndex: "effective_status", + key: "effective_status", + align: "center", + }, + { + title: "状态", + dataIndex: "status", + key: "status", align: "center", }, { @@ -44,41 +81,209 @@ function WhitelistManagement() { dataIndex: "operation", key: "operation", align: "center", - render: () => { - return ; + render: (_, record) => { + return ( + + + + + + + } + > + + + ); }, }, ]; + const [pageData, setPageData] = useState({ + pn: 1, + page_size: 10, + }); + const [currentId, setCurrentId] = useState(""); + const [dataSource, setDataSource] = useState([]); + const [total, setTotal] = useState(0); + const submit = () => { + setPageData({ + pn: 1, + page_size: 10, + }); + }; + //搜索接口 + const search = () => { + let params = { ...searchForm.getFieldsValue(), ...pageData }; + ajax.getWhiteList(params).then((res) => { + if (res.status === 20000) { + setDataSource(res.data.list); + setTotal(res.data.total); + } + }); + }; + const [editModal, setEditModal] = useState({ + visible: false, + record: {}, + status: "edit", + }); + //删除接口 + const deleteWhiteVehicle = (id) => { + ajax.deleteWhiteVehicle({ id }).then((res) => { + if (res.status === 20000) { + message.success("删除成功"); + submit(); + } else { + message.error(res.message); + } + }); + }; + + //启用接口 + const enableWhiteVehicle = (id) => { + ajax.enableWhiteVehicle({ id }).then((res) => { + if (res.status === 20000) { + message.success("启用成功"); + } else { + message.error(res.message); + } + }); + }; + //禁用接口 + const disableWhiteVehicle = (id) => { + ajax.disableWhiteVehicle({ id }).then((res) => { + if (res.status === 20000) { + message.success("禁用成功"); + } else { + message.error(res.message); + } + }); + }; + //添加黑名单或编辑黑名单 + const addBlackItem = () => { + editForm + .validateFields() + .then((res) => { + if (editModal.status === "add") { + ajax.addWhiteList(res).then((res) => { + if (res.status === 20000) { + message.success("添加成功"); + setEditModal({ visible: false }); + editForm.resetFields(); + submit(); + } else { + message.error(res.message); + } + }); + } else if (editModal.status === "edit") { + res.id = currentId; + ajax.editWhiteVehicle(res).then((res) => { + if (res.status === 20000) { + message.success("编辑成功"); + setEditModal({ visible: false }); + editForm.resetFields(); + submit(); + } else { + message.error(res.message); + } + }); + } + }) + .catch((err) => console.error(err)); + }; + useEffect(() => { + search(); + }, [pageData]); return (
-
+
- + - + - + - +
+
{ + setPageData({ pn: page, page_size: pageSize }); + }, + onShowSizeChange: (current, size) => { + setPageData({ pn: current, page_size: size }); + }, + }} + /> + { + setEditModal({ visible: false }); + editForm.resetFields(); + }} + onOk={addBlackItem} + width={900} + > + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); } -export default WhitelistManagement; \ No newline at end of file + +export default WhitelistManagement; diff --git a/src/pages/OutRoadMgm/OutSegmentMgm/OutSegment/ConfigParking/LEDConfiguration.jsx b/src/pages/OutRoadMgm/OutSegmentMgm/OutSegment/ConfigParking/LEDConfiguration.jsx index c211de0..05e7477 100644 --- a/src/pages/OutRoadMgm/OutSegmentMgm/OutSegment/ConfigParking/LEDConfiguration.jsx +++ b/src/pages/OutRoadMgm/OutSegmentMgm/OutSegment/ConfigParking/LEDConfiguration.jsx @@ -1,4 +1,4 @@ -import React, { useState } from "react"; +import React, { useEffect, useState } from "react"; import { Input, Form, @@ -9,31 +9,34 @@ import { Modal, Select, Popover, + message, } from "antd"; -function GateControlManagement() { +const { TextArea } = Input; +import ajax from "@/services"; +function GateControlManagement({ id: road_id }) { const columns = [ { title: "业务场景", - dataIndex: "businessScene", - key: "businessScene", + dataIndex: "business_type_name", + key: "business_type_name", align: "center", }, { title: "LED显示文案", - dataIndex: "ledDisplayText", - key: "ledDisplayText", - align: "center", - }, - { - title: "同步状态", - dataIndex: "syncStatus", - key: "syncStatus", + dataIndex: "show_copywriting", + key: "show_copywriting", align: "center", }, + // { + // title: "同步状态", + // dataIndex: "syncStatus", + // key: "syncStatus", + // align: "center", + // }, { title: "更新时间", - dataIndex: "updateTime", - key: "updateTime", + dataIndex: "update_time", + key: "update_time", align: "center", }, { @@ -42,15 +45,37 @@ function GateControlManagement() { key: "action", align: "center", - render: () => { + render: (_, record) => { return ( -

编辑

-

删除

- + <> + + + } > @@ -59,25 +84,104 @@ function GateControlManagement() { }, }, ]; + const [form] = Form.useForm(); + const [addForm] = Form.useForm(); const [modalData, setModalData] = useState({ visible: false, + status: "add", }); + const [delModal, setDelModal] = useState({ + visible: false, + id: null, + }); + const [dataSource, setDataSource] = useState([]); // 表格数据 + const [total, setTotal] = useState(0); const addLEDText = () => { - setModalData({ ...modalData, visible: true }); + setModalData({ ...modalData, visible: true, status: "add" }); + }; + const [pageData, setPageData] = useState({ + pn: 1, + page_size: 10, + }); + const search = () => { + const params = { ...form.getFieldsValue(), ...pageData, road_id }; + ajax.getLEDList(params).then((res) => { + if (res.status === 20000) { + setDataSource(res.data.list); + setTotal(res.data.total); + } + }); + }; + const submit = () => { + setPageData({ ...pageData, pn: 1 }); }; + + //编辑或添加LED + function addLED(params) { + ajax.addLED(params).then((res) => { + if (res.status === 20000) { + setModalData({ ...modalData, visible: false }); + message.success("添加成功"); + search(); + } else { + message.error(res.message); + } + }); + } + function editLED(params) { + ajax.editLED(params).then((res) => { + if (res.status === 20000) { + setModalData({ ...modalData, visible: false }); + message.success("编辑成功"); + search(); + } else { + message.error(res.message); + } + }); + } + const addOrEditLED = () => { + addForm + .validateFields() + .then((res) => { + if (modalData.status === "add") { + res.road_id = road_id; + addLED(res); + } else { + res.road_id = road_id; + editLED(res); + } + }) + .catch((err) => console.error(err)); + addForm.resetFields(); + }; + function delLED() { + ajax.delLED({ id: delModal.id }).then((res) => { + if (res.status === 20000) { + message.success("删除成功"); + } else { + message.error("删除失败"); + } + }); + setDelModal({ visible: false, id: null }); + } + useEffect(() => { + search(); + }, [pageData]); return (
-
+
- +
+ setModalData({ ...modalData, visible: false })} + onCancel={() => { + setModalData({ ...modalData, visible: false }); + addForm.resetFields(); + }} + onOk={addOrEditLED} > - - - - - + +