feat():开闸方式代码

1 year ago · 7604c2b48e
4 changed files with 182 additions and 55 deletions
--- a/package.json
+++ b/package.json
@ -48,7 +48,7 @@
    "react-redux": "^7.2.6",
    "react-refresh": "^0.13.0",
    "react-router-dom": "^6.2.2",
-    "sass": "1.69.5" ,
+    "sass": "1.69.5",
    "sass-loader": "^12.6.0",
    "speed-measure-webpack-plugin": "^1.5.0",
    "style-loader": "^3.3.1",
--- a/src/pages/OutRoadMgm/OutSegmentMgm/OutSegment/ConfigParking/GateControlManagement.jsx
+++ b/src/pages/OutRoadMgm/OutSegmentMgm/OutSegment/ConfigParking/GateControlManagement.jsx
@ -1,53 +1,82 @@
 import React, { useState,useEffect } from "react";
-import { Input, Form, Button, Table, Row, Col,Modal,Select,TimePicker,message } from "antd";
+import { Input, Form, Button, Table, Row,Pagination, Col,Modal,Select,TimePicker,message } from "antd";
 import ajax from "@/services";
+import { DeleteOutlined, UploadOutlined } from "@ant-design/icons";
+import { dictionary, utils } from "@/config/common";
 const {TextArea}=Input
-function GateControlManagement() {
+function GateControlManagement(props) {
+  const {id}=props
  //添加入场开闸流程弹框
  const [openVisible,setOpenVisible]=useState(false)
  const [dataSource,setDataSource]=useState([])
+ 
+  //表单
+  const [openForm] = Form.useForm();
+  //开闸弹框数据
+  // const [openMoal,setOpenModal]=useState({
+  //   car_group:"",
+  //   pass_name:"",
+  //   open_method:""
+  // })
+  //下拉框的所有数据
+  const [allData,setAllData]=useState({
+    carGroup:[],//车辆组
+    passName:[],//通道名称
+    openMethod:[],//开闸方式
+  })
+  const [openId,setOpenId]=useState()
+  const [pageData,setPageData]=useState({
+    pn:1,
+    page_size: dictionary?.pageSizeOptions1[0],
+  })
+  const [total,setTotal]=useState(0)
  const columns = [
    {
      title: "序号",
      dataIndex: "id",
      key: "id",
      align: "center",
+      render: (text, record, index) => index + 1,
    },
    {
      title: "车辆组",
-      dataIndex: "vehicleGroup",
-      key: "vehicleGroup",
+      dataIndex: "group_name",
+      key: "group_name",
      align: "center",
    },
    {
      title: "开闸方式",
-      dataIndex: "gateControlMethod",
-      key: "gateControlMethod",
+      dataIndex: "option_name",
+      key: "option_name",
      align: "center",
    },
    {
      title: "通道名称",
-      dataIndex: "channelName",
-      key: "channelName",
+      dataIndex: "channel_name",
+      key: "channel_name",
      align: "center",
    },
    {
      title: "起止时间",
-      dataIndex: "timeRange",
-      key: "timeRange",
+      dataIndex: "s_e_time",
+      key: "s_e_time",
      align: "center",
    },
    {
      title: "同步状态",
-      dataIndex: "syncStatus",
-      key: "syncStatus",
+      dataIndex: "synchronous_status",
+      key: "synchronous_status",
      align: "center",
    },
    {
      title: "备注",
-      dataIndex: "remark",
-      key: "remark",
+      dataIndex: "note",
+      key: "note",
      align: "center",
+      width:230,
+      render:(item,row)=>{
+        return <div className="note" title={item}>{item}</div>
+      }
    },
    {
      title: "操作",
@ -56,30 +85,60 @@ function GateControlManagement() {
      align: "center",
      render:(item,row)=>{
        return <>
-          <span>编辑</span>
-          <span>删除</span>
+          <span className="operate" onClick={()=>operateData(row)}>编辑</span>
+          <span className="delete" onClick={()=>{deleteData(row)}}>删除</span>
        </>
      }
    },
  ];
-  //表单
-  const [openForm] = Form.useForm();
-  //开闸弹框数据
-  // const [openMoal,setOpenModal]=useState({
-  //   car_group:"",
-  //   pass_name:"",
-  //   open_method:""
-  // })
-  //下拉框的所有数据
-  const [allData,setAllData]=useState({
-    carGroup:[],//车辆组
-    passName:[],//通道名称
-    openMethod:[],//开闸方式
-  })
  //弹框确认按钮
  const handleOk=()=>{
    
  }
+  //编辑
+  const operateData=(row)=>{
+    openForm.setFieldsValue({
+      group_id:row.group_id,
+      option_id:row.option_id,
+      channel_id:row.channel_id,
+      note:row.note,
+      // s_e_time:row.s_e_time?.split(",")||null
+    })
+    setOpenId(row.id)
+    setOpenVisible(true)
+  }
+  //删除
+  const deleteData=(row)=>{
+    Modal.confirm({
+      title: "确认删除？",
+      content: `是否确认删除该开闸流程？`,
+      icon: <DeleteOutlined />,
+      onOk: () => {
+        ajax
+        .deleteOpenData({road_id:id,id:row.id})
+        .then((res) => {
+          if (res.status === 20000) {
+           message.success(res.message)
+           setPageData({
+             pn:1,
+             page_size:dictionary?.pageSizeOptions1[0]
+           })
+           getOpenData({
+            pn:1,
+            page_size:dictionary?.pageSizeOptions1[0]
+          })
+           
+          }else{
+            message.warning(res.message)
+          }
+        })
+        .catch((err) => {
+          console.error(err);
+        });
+      },
+    });
+   
+  }
  //获取下拉框所有数据
  const getOptionData=()=>{
    ajax
@ -95,27 +154,29 @@ function GateControlManagement() {
      });
  }
  const onFinish=(value)=>{
-    let start_stop_time=""
-    value.start_stop_time.map((item,index)=>{
+    let s_e_time=""
+    value.s_e_time?.map((item,index)=>{
      let str=item.format("HH-mm-ss");
-      index!=1?start_stop_time=str+",":start_stop_time+=str;
+      index!=1?s_e_time=str+",":s_e_time+=str;
    })
    let ajaxData={
      ...value,
-      start_stop_time:start_stop_time
+      s_e_time:"",
+      id:openId
    }
    ajax.addOpenData(ajaxData).then((res) => {
      if (res.status === 20000) {
        message.success(res.message)
        setOpenVisible(false)
        openForm.setFieldsValue({
-          car_group:null,
-          open_method:null,
-          pass_name:null,
-          remark:"",
-          start_stop_time:null
+          group_id:null,
+          option_id:null,
+          channel_id:null,
+          note:"",
+          s_e_time:null
        })
        getOpenData()
+        setOpenId("")
      }else{
        message.warning(res.message)
      }
@ -126,11 +187,13 @@ function GateControlManagement() {
  }
  const onCancel=()=>{
    setOpenVisible(false)
+    setOpenId("")
  }
-  const getOpenData=()=>{
-    ajax.getOpenData().then((res) => {
+  const getOpenData=(pageData)=>{
+    ajax.getOpenData({...pageData,road_id:id}).then((res) => {
      if (res.status === 20000) {
-       setDataSource(res.data)
+       setDataSource(res.data.list)
+       setTotal(res.data.total)
      }else{
        message.warning(res.message)
      }
@ -139,24 +202,57 @@ function GateControlManagement() {
      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);
+      getOpenData(temFormData)
+    }
   
 
  useEffect(()=>{
    getOptionData()
-    getOpenData()
+    getOpenData(pageData)
  },[])
  
  return (
-    <div>
+    <div className="open-modal-page">
      <header style={{ margin: "10px 0" }}>
        <Button type="primary" onClick={()=>{setOpenVisible(true)}}>添加入场开闸流程</Button>
      </header>
      <main>
-        <Table 
+        <Table
+        className="open-method-table"
        columns={columns}
        dataSource={dataSource} 
+        pagination={false}
        // className="yisa-table"
        ></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>
      <Modal
        className="open_method_modal"
@ -176,35 +272,35 @@ function GateControlManagement() {
        >
          <Form.Item
            label="车辆组"
-            name="car_group"
+            name="group_id"
            rules={[{ required: true }]}
          >
            <Select  options={allData.carGroup} placeholder="请选择车辆组"/>
          </Form.Item>
          <Form.Item
            label="通道名称"
-            name="pass_name"
+            name="channel_id"
            rules={[{ required: true }]}
          >
            <Select  options={allData.passName} placeholder="请选择通道名称"/>
          </Form.Item>
          <Form.Item
            label="开闸方式"
-            name="open_method"
+            name="option_id"
            rules={[{ required: true }]}
          >
            <Select  options={allData.openMethod} placeholder="请选择开闸方式"/>
          </Form.Item>
          <Form.Item
            label="起止时间"
-            name="start_stop_time"
+            name="s_e_time"
            rules={[{ required: true }]}
          >
          <TimePicker.RangePicker/>
          </Form.Item>
            <Form.Item
            label="备注"
-            name="remark"
+            name="note"
            // rules={[{ required: true }]}
          >
            <TextArea  maxLength={200} showCount placeholder="请输入"/>
--- a/src/pages/OutRoadMgm/OutSegmentMgm/OutSegment/index.scss
+++ b/src/pages/OutRoadMgm/OutSegmentMgm/OutSegment/index.scss
@ -295,4 +295,26 @@ $color-primary: var(--color-primary);
        margin-left: 8px;
        border: 0;
    }
-}
+}
+.open-modal-page{
+    height: 700px;
+    overflow: auto;
+    @include scrollBar(var(--color-user-list-bg), #3B97FF);
+    .open-method-table{
+        .note{
+            max-width: 230px;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+            overflow: hidden;
+        }
+        .operate{
+            color: #00ccff;
+            cursor: pointer;
+            margin-right: 10px;
+        }
+        .delete{
+            color: red;
+            cursor: pointer;
+        }
+    }
+}
--- a/src/services/OutRoadMgm/OutSegment.js
+++ b/src/services/OutRoadMgm/OutSegment.js
@ -69,12 +69,12 @@ const getRoadMs = (params) => {
 //获取开闸部分下拉跨所有数据
 const getOpenAllOption=(params)=>{
  return ajax({
-    url: "/api/orp/road/get_all_open_option",
+    url: "/api/orp/road/get_all_drop",
    type: "post",
    data: params,
  });
 }
-//获取开闸部分下拉跨所有数据
+//添加开闸部分下拉数据
 const addOpenData=(params)=>{
  return ajax({
    url: "/api/orp/road/add_open",
@ -90,6 +90,14 @@ const getOpenData=(params)=>{
    data: params,
  });
 }
+//删除开闸数据
+const deleteOpenData=(params)=>{
+  return ajax({
+    url: "/api/orp/road/del_open",
+    type: "post",
+    data: params,
+  });
+}
 ///api/orp/road/edit_road_ms     编辑路段MS通信账号
 const editRoadMs = (params) => {
  return ajax({
@ -563,5 +571,6 @@ export default {
  editOutSegmentRoad,
  getOpenAllOption,
  addOpenData,
-  getOpenData
+  getOpenData,
+  deleteOpenData
 };