feat():新增记录查询模块

src/pages/NewEnergy/RecordsInquiry/AppointmentRecord/index.jsx

@@ -0,0 +1,6 @@
+import React from "react"
+import loadable from "@loadable/component"
+import { LoadingImg } from "@/components"
+
+const AppointmentRecord = loadable(() => import("./loadable"))
+export default (pros) => <AppointmentRecord {...pros} fallback={<LoadingImg />} />

src/pages/NewEnergy/RecordsInquiry/AppointmentRecord/index.scss

@@ -0,0 +1,238 @@
+@import "@/assets/css/mixin.scss";
+$color-container-bg: var(--color-container-bg);
+$color-user-list-bg: var(--color-user-list-bg);
+$color-text: var(--color-text);
+$color-primary: var(--color-primary);
+
+.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;
+        }
+      }
+    }
+  }
+}
+
+.ant-input::-webkit-input-placeholder {
+  color: var(--color-placeholder);
+}
+
+.ant-input::-moz-placeholder {
+  color: var(--color-placeholder);
+}
+.right-list  .ant-btn-primary {
+  width: 68px;
+  height: 30px;
+  background: linear-gradient(180deg, #3aa9ff, #59b7ff);
+  border-radius: 4px;
+}
+.ant-input:-ms-input-placeholder {
+  color: var(--color-placeholder);
+}
+.right-list .cc-result-flow .table-wrap .yisa-table .ant-table-thead th {
+  background-color: #616b83 !important;
+}
+.right-list .cc-result-flow .table-wrap .yisa-table .ant-table-tbody td {
+  background-color: #3e4557 !important;
+}
+.right-list .cc-result-flow .table-wrap .yisa-table .ant-table-tbody tr:nth-child(even) td {
+  background-color: #3e4557 !important;
+}
+.ant-input::placeholder {
+  color: var(--color-placeholder);
+}
+
+.ant-select-selection-placeholder {
+  color: var(--color-placeholder);
+}
+
+.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 {
+  background-color: var(--color-input-disabled-bg);
+  color: var(--color-input-disabled-color);
+  cursor: not-allowed;
+}
+
+.ant-select-multiple {
+  .ant-select-selector {
+    .ant-select-selection-item {
+      background-color: var(--color-bg-body);
+      border-color: var(--color-border);
+
+      .ant-select-selection-item-remove {
+        color: var(--color-text);
+      }
+    }
+  }
+}
+
+.ant-select-arrow {
+  color: var(--color-text);
+}
+
+.ant-select-clear {
+  border-radius: 50%;
+}
+
+.ant-select-dropdown-menu {
+  background-color: var(--color-input-bg);
+
+  .ant-select-dropdown-menu-item {
+    color: var(--color-text);
+
+    &.ant-select-dropdown-menu-item-active {
+      color: #fff;
+      // background-color: var(--radio-button-bg-checked);
+    }
+
+    &.ant-select-dropdown-menu-item-selected {
+      color: #fff;
+      // background-color: var(--radio-button-bg-checked);
+    }
+
+    &:hover {
+      color: #fff;
+      // background-color: var(--radio-button-bg-checked);
+    }
+  }
+}
+
+.ant-select-selector {
+  background-color: var(--color-search-list-item-bg) !important;
+  box-shadow: none !important;
+  border-radius: 4px;
+  color: var(--color-search-list-item-value);
+  border-color: var(--color-search-list-item-bd) !important;
+}
+
+.ant-select-selection {
+  background-color: var(--color-input-bg);
+  box-shadow: none;
+  color: var(--color-text);
+  // border-color:var(--checkable-tag-border);
+}
+
+.ant-form-horizontal .ant-form-item-label {
+  label {
+    display: inline-block;
+    word-wrap: break-word;
+    white-space: normal;
+  }
+}
+
+.ant-picker {
+  width: 100%;
+  background-color: var(--color-search-list-item-bg);
+  border-color: var(--color-border);
+}
+
+// .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;
+//       }
+//     }
+//   }
+// }
+.totalModal{
+  .ant-modal-footer{
+    display: none;
+  }
+  position: absolute;
+  top: 40px;
+  right: 174px;
+}
+.ltc-item-img {
+  width: 390px;
+  height: 300px;
+  border: 1px solid;
+  background: #6565656b;
+  margin-right: 20px !important;
+  img  {
+    height: 295px;
+    width: 387px;
+    // object-fit: contain;
+  }
+}
+.hanleHistoyModal{
+  max-height: 700px;
+  overflow: auto;
+}
+.hanleHistoyModal::-webkit-scrollbar {
+  width: 5px;
+}
+.hanleHistoyModal::-webkit-scrollbar-thumb {
+  background-color: #9da2ab;
+  border-radius: 10px;
+}
+.modal-img{
+  img{
+    width: 200px;
+    height: 200px;
+  }
+}

src/pages/NewEnergy/RecordsInquiry/AppointmentRecord/loadable.jsx

@@ -0,0 +1,173 @@
+import React, { useState, useRef, useEffect } from "react";
+import {
+  message,
+  Pagination,
+  Table,
+  Space,
+  Modal,
+  Button,
+  Tabs,
+  Descriptions,
+  Input,
+  Steps,
+  Select,
+  Image,
+  Timeline,
+  Popover
+} from "antd";
+import { dictionary } from "@/config/common";
+import ajax from "@/services";
+import { TableModule } from "@/components";
+import "./index.scss";
+
+const { TextArea } = Input;
+
+function AppointmentRecord() {
+  // 详情弹窗
+  const [detailVisible, setDetailVisible] = useState(false);
+  // 列表数据
+  const [tableData, setTableData] = useState([]);
+  // 数据总数
+  const [total, setTotal] = useState(0);
+  // 详情数据
+  const [detailData, setDetailData] = useState({});
+  // 初始搜索条件
+  const initFormData = {
+    operator: "0",
+    rule_name: "",
+  };
+
+  const columns = [
+    {
+      title: "运营商名称",
+      dataIndex: "operator",
+      key: "operator",
+      align: "center",
+    },
+    {
+      title: "规则名称",
+      dataIndex: "plate",
+      key: "plate",
+      align: "center",
+    },
+    {
+      title: "规则编码",
+      dataIndex: "plate_color",
+      key: "plate_color",
+      align: "center",
+    },
+    {
+      title: "创建人",
+      dataIndex: "berth_id",
+      key: "berth_id",
+      width: 100,
+      align: "center",
+    },
+    {
+      title: "创建时间",
+      dataIndex: "in_time",
+      key: "in_time",
+      align: "center",
+    },
+    {
+      title: "操作",
+      dataIndex: "operation",
+      key: "operation",
+      align: "center",
+      fixed: "right",
+      width: 100,
+      render: (text, record, index) => {
+        return (
+          <>
+            <Button type="primary" onClick={() => openModal(index, record)}>
+              详情
+            </Button>
+          </>
+        )
+
+      },
+    },
+  ];
+
+  const formSearch = [
+    {
+      name: "operator",
+      type: "Select",
+      label: "商户名称",
+      defaultValue: "0",
+      placeholder: "请选择商户名称",
+    },
+    {
+      name: "rule_name",
+      type: "Input",
+      label: "规则名称",
+      placeholder: "请输入出场收费员",
+    },
+    {
+      name: "timePeriod",
+      type: "RangePicker",
+      label: "时间段",
+    },
+  ];
+
+  // 打开弹窗
+  const openModal = (index, record) => {
+    setDetailData(record)
+    setDetailVisible(true);
+  }
+
+  // 检索
+  const search = (params) => {
+    ajax.getParkingList(params).then((res) => {
+      if (res.status === 20000) {
+        setTableData(res.data.list);
+        setTotal(res.data.total);
+      } else {
+        message.error(res.message)
+      }
+    });
+  }
+
+  const handelAdd = () => {
+    setDetailVisible(true)
+  }
+
+  return (
+    <>
+      <TableModule
+        showSerial={true}
+        isExport={false}
+        diyButton={
+          <Button
+            type="primary"
+            onClick={handelAdd}
+          >
+            新增
+          </Button>
+        }
+        columns={columns}
+        tableData={tableData}
+        formSearch={formSearch}
+        pagename="停车记录查询"
+        pageName={'AppointmentRecord'}
+        initFormData={initFormData}
+        total={total}
+        search={search}
+        exportUrl="/api/bpm/record/get_record_export"
+      />
+      <Modal
+        open={detailVisible}
+        width={1500}
+        className="totalModal"
+        onCancel={() => {
+          setDetailVisible(false);
+        }}
+        destroyOnClose
+      >
+
+      </Modal>
+    </>
+  );
+}
+
+export default AppointmentRecord;

src/pages/NewEnergy/RecordsInquiry/index.jsx

@@ -0,0 +1,5 @@
+import AppointmentRecord from './AppointmentRecord'
+
+export default {
+  AppointmentRecord
+}

src/pages/NewEnergy/index.jsx

@@ -1,7 +1,9 @@
 import ChargingMgm from './ChargingMgm'
 import NewEnergyOverview from './NewEnergyOverview'
+import RecordsInquiry from './RecordsInquiry'
 
 export default {
   NewEnergyOverview,
-  ...ChargingMgm
+  ...ChargingMgm,
+  ...RecordsInquiry
 }

src/router/router.config.js

@@ -1336,6 +1336,12 @@ let routes = [
         name: "orderRuleMgm",
         component: pages.OrderRuleMgm,
       },
+      {
+        path: "/newEnergy/appointmentRecord",
+        text: "预约记录",
+        name: "appointmentRecord",
+        component: pages.AppointmentRecord,
+      },
     ],
   },
 ];