feat():完成通道管理模块的开发

src/pages/OutRoadMgm/OutSegmentMgm/OutSegment/ConfigParking/ChannelManagement.jsx

@@ -1,29 +1,40 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
-import { Input, Form, Button, Table, Row, Col } from "antd";
+import { Input, Form, Button, Table, Row, Col, Pagination } from "antd";
-function ChannelManagement() {
+import ajax from "@/services";
+import { dictionary, utils } from "@/config/common";
+function ChannelManagement(props) {
+  const { id } = props
+  const [dataSource, setDataSource] = useState([])
+  const [pageData, setPageData] = useState({
+    pn: 1,
+    page_size: dictionary?.pageSizeOptions1[0],
+  })
+  const [total, setTotal] = useState(0)
+  const [form] = Form.useForm()
   const columns = [
     {
       title: "序号",
       dataIndex: "id",
       key: "id",
       align: "center",
+      render: (text, record, index) => index + 1,
     },
     {
       title: "通道名称",
-      dataIndex: "channelName",
+      dataIndex: "name",
-      key: "channelName",
+      key: "name",
       align: "center",
     },
     {
       title: "通道编码",
-      dataIndex: "channelCode",
+      dataIndex: "code",
-      key: "channelCode",
+      key: "code",
       align: "center",
     },
     {
       title: "出入口类型",
-      dataIndex: "entryType",
+      dataIndex: "type_name",
-      key: "entryType",
+      key: "type_name",
       align: "center",
     },
     {
@@ -33,18 +44,68 @@ function ChannelManagement() {
       align: "center",
     },
   ];
+  const getChannelTable = (pageData) => {
+    ajax
+      .getChannelTable({ ...pageData, road_id: id, })
+      .then((res) => {
+        if (res.status === 20000) {
+          setDataSource(res.data.list)
+          setTotal(res.data.total)
+        } else {
+          message.warning(res.message)
+        }
+      })
+      .catch((err) => {
+        console.error(err);
+      });
+  }
+  //分页
+  function onShowSizeChange(pn, page_size) {
+    let temFormData = {};
+    if (pageData.page_size == page_size) {
+      temFormData = {
+        ...pageData,
+        pn,
+      };
+    } else {
+      temFormData = {
+        ...pageData,
+        pn: 1,
+        page_size,
+      };
+    }
+    setPageData(temFormData);
+    getChannelTable(temFormData)
+  }
+  const onFinish = (value) => {
+    setPageData({
+      pn: 1,
+      page_size: dictionary?.pageSizeOptions1[0],
+    })
+    getChannelTable({
+       ...value,
+        pn: 1,
+        page_size: dictionary?.pageSizeOptions1[0],
+    })
+  }
+  useEffect(() => {
+    getChannelTable()
+  }, [])
   return (
-    <div>
+    <div className="channel-page-modal">
       <header style={{ margin: "10px 0" }}>
-        <Form>
+        <Form
+          form={form}
+          onFinish={onFinish}
+        >
           <Row>
             <Col span="4_8" style={{ width: "30%" }}>
-              <Form.Item label="通信名称">
+              <Form.Item label="通信名称" name="name">
                 <Input />
               </Form.Item>
             </Col>
-            <Form.Item>
+            <Form.Item className="submitBtn">
-              <Button type="primary">查询</Button>
+              <Button type="primary" className="submit" htmlType="submit">查询</Button>
             </Form.Item>
           </Row>
         </Form>
@@ -53,7 +114,21 @@ function ChannelManagement() {
         <Table
           columns={columns}
           //  className="yisa-table"
+          dataSource={dataSource}
+          pagination={false}
         ></Table>
+        <Pagination
+          className="pagination-common"
+          showSizeChanger={true}
+          showQuickJumper={true}
+          // showTotal={() => `共 ${total_records} 条`}
+          total={total}
+          current={pageData.pn}
+          pageSize={pageData.page_size}
+          pageSizeOptions={dictionary?.pageSizeOptions1}
+          onChange={onShowSizeChange}
+          onShowSizeChange={onShowSizeChange}
+        />
       </main>
     </div>
   );

src/pages/OutRoadMgm/OutSegmentMgm/OutSegment/ConfigParking/index.jsx

@@ -36,7 +36,7 @@ function ConfigParking(props) {
         {
           label: "通道管理",
           key: "4",
-          children: <ChannelManagement />,
+          children: <ChannelManagement id={itemData.id}/>,
         },
         {
           label: "开闸方式管理",
@@ -115,6 +115,7 @@ function ConfigParking(props) {
   return (
     <Modal
       width={1500}
+      className="park-manage-modal"
       style={{ top: "5px" }}
       destroyOnClose
       bodyStyle={{ height: "800px", overflow: "auto" }}

src/pages/OutRoadMgm/OutSegmentMgm/OutSegment/index.scss

@@ -296,7 +296,8 @@ $color-primary: var(--color-primary);
         border: 0;
     }
 }
-.open-modal-page{
+.park-manage-modal{
+    .open-modal-page{
         height: 700px;
         overflow: auto;
         @include scrollBar(var(--color-user-list-bg), #3B97FF);
@@ -317,4 +318,11 @@ $color-primary: var(--color-primary);
                 cursor: pointer;
             }
         }
+    }
+    .channel-page-modal{
+        height: 700px;
+        overflow: auto;  
+        @include scrollBar(var(--color-user-list-bg), #3B97FF);
+    }
+
 }

src/services/OutRoadMgm/OutSegment.js

@@ -106,6 +106,14 @@ const deleteOpenData=(params)=>{
     data: params,
   });
 }
+//通道列表
+const getChannelTable=(params)=>{
+  return ajax({
+    url: "/api/orp/road/get_road_channel",
+    type: "post",
+    data: params,
+  });
+}
 ///api/orp/road/edit_road_ms     编辑路段MS通信账号
 const editRoadMs = (params) => {
   return ajax({
@@ -581,5 +589,6 @@ export default {
   addOpenData,
   getOpenData,
   deleteOpenData,
-  editOpenData
+  editOpenData,
+  getChannelTable
 };