diff --git a/package.json b/package.json index 29db177..35a834e 100644 --- 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", diff --git a/src/pages/OutRoadMgm/OutSegmentMgm/OutSegment/ConfigParking/GateControlManagement.jsx b/src/pages/OutRoadMgm/OutSegmentMgm/OutSegment/ConfigParking/GateControlManagement.jsx index 69a56bf..9833fbc 100644 --- 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
{item}
+ } }, { title: "操作", @@ -56,30 +85,60 @@ function GateControlManagement() { align: "center", render:(item,row)=>{ return <> - 编辑 - 删除 + operateData(row)}>编辑 + {deleteData(row)}}>删除 } }, ]; - //表单 - 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: , + 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 ( -
+
-
+ `共 ${total_records} 条`} + total={total} + current={pageData.pn} + pageSize={pageData.page_size} + pageSizeOptions={dictionary?.pageSizeOptions1} + onChange={onShowSizeChange} + onShowSizeChange={onShowSizeChange} + />