feat(): 错峰车场管理page

src/components/TableModule/index.jsx

@@ -37,6 +37,7 @@ const { RangePicker } = DatePicker;
 //如想在外部调用搜索方法，请通过<TableModule ref={Ref} />  ，   Ref.current.fetche 的方式调用
 const TableModule = forwardRef((props, ref) => {
   const {
+    className="",
     pagename = "",
     columns = [], //表头
     tableData = [], //table的数据
@@ -60,6 +61,7 @@ const TableModule = forwardRef((props, ref) => {
     limitCon,//自定义限制条件
     isQuickMenu = [],
     mandatory_name,
+    renderAdd=() => {},
     pageName = '',//路由名字
     showSerial = false,// 表格是否显示序号
     limitType = 0, // 时间限制类型 0无限制， < 0 今天之前不可选， > 0 今天之后不可选
@@ -934,7 +936,7 @@ const TableModule = forwardRef((props, ref) => {
     })
   }, [])
   return (
-    <div className="TableModule">
+    <div className={`TableModule ${className}`}>
       <div className="left-search">
         <div className="title">{"查询条件"}</div>
         <div className="searchWrap">
@@ -946,6 +948,7 @@ const TableModule = forwardRef((props, ref) => {
             <Button type="primary" className="submit" onClick={() => { pageData.pn == 1 ? fetch(1) : setPageData({ ...pageData, pn: 1 }) }}>
               查询
             </Button>
+            {renderAdd()}
           </div>
         </div>
       </div>

src/pages/OffPeak/OffPeakShareRecords/ShareParkMgm/index.scss

@@ -3,4 +3,13 @@
     &:hover {
         cursor: pointer;
     }
+}
+.share-park-table {
+    .bottomBox {
+        > button {
+            &:nth-child(2) {
+                margin:  0 25px;
+            }
+        }
+    }
 }

src/pages/OffPeak/OffPeakShareRecords/ShareParkMgm/infoModal/index.jsx

@@ -0,0 +1,123 @@
+import React, {useState, useEffect} from 'react'
+import { Modal, Form, Input, DatePicker, TreeSelect, Button, Col, Row, Select } from 'antd'
+import { SearchableTreeSelect } from '@/components'
+import moment from 'moment'
+import './index.scss'
+
+function InfoModal (props)  {
+    const {
+        visible,
+        isEdit=false,
+        isDetail=false,
+        onCancel,
+        timeRulesData=[],
+        data={},
+        onOk
+    } = props
+
+    const [baseForm] = Form.useForm()
+
+    const rules = [
+        {
+            required: true,
+            message: "此为必填字段",
+        },
+    ]
+
+    const handleSave = () => {
+        baseForm.validateFields().then((data) => {
+            onOk({...data})
+        }).catch(err => {
+            console.error(err)
+        })
+    }
+
+    const validateCws = (_, value) => {
+        const total = baseForm.getFieldValue('total');
+        if (value > total) {
+          return Promise.reject(new Error('可预约车位数大于总数'));
+        }
+        return Promise.resolve();
+    }
+
+    useEffect(() => {
+        if (visible) {
+            baseForm.setFieldsValue({...data})
+            console.log(data)
+        } else {
+            baseForm.resetFields()
+        }
+    }, [visible])
+
+    return (
+        <Modal
+            open={visible}
+            onCancel={onCancel}
+            footer={null}
+            width={600}
+            className="yisa-modal modal-conf"
+            title={isEdit ? '错峰修改' : '错峰新增'}
+        >
+            <div className="conf-form-container">
+                <Form
+                    form={baseForm}
+                >
+
+
+                    <Row>
+                        <Col span={11}>
+                            <Form.Item label="车场名称" name="park_name" rules={rules}>
+                                <Input></Input>
+                            </Form.Item>
+                        </Col>
+                        <Col span={2}></Col>
+                        <Col span={11}>
+                            <Form.Item label="总车位数" name="total" rules={rules}>
+                                <Input type='number'></Input>
+                            </Form.Item>
+                        </Col>
+                    </Row>
+                    <Row>
+                        <Col span={11}>
+                            <Form.Item label="可预约车位数" name="kyycws" rules={[{required: true, message: '此为必填字段'}, {validator: validateCws}]}>
+                                <Input type='number'></Input>
+                            </Form.Item>
+                        </Col>
+                        <Col span={2}></Col>
+                        <Col span={11}>
+                            <Form.Item label="时间规则" name="time_rules_id" rules={rules}>
+                                <Select
+                                    options={timeRulesData}
+                                />
+                            </Form.Item>
+                        </Col>
+                    </Row>
+
+
+                    <Form.Item name="id" hidden></Form.Item>
+                </Form>
+            </div>
+
+            <div className="conf-form-btn">
+                {
+                    isDetail ? (
+                        <Button onClick={onCancel}>关闭</Button>
+                    ) : (
+                        <>
+                            <Button type="" onClick={onCancel}>取消</Button>
+                            {
+                                (data.id) ? (
+                                    <Button type="primary" onClick={handleSave}>修改</Button>
+                                ) : (
+                                    <Button type="primary" onClick={handleSave}>添加</Button>
+                                )
+                            }
+                        </>
+                    )
+                }
+            </div>
+        </Modal>
+    )
+}
+
+export default InfoModal

src/pages/OffPeak/OffPeakShareRecords/ShareParkMgm/infoModal/index.scss

@@ -0,0 +1,32 @@
+@import "@/assets/css/mixin.scss";
+
+.modal-conf {
+    .conf-form-btn {
+        margin-top: 20px;
+        display: flex;
+        justify-content: center;
+        button {
+            margin: 0 10px;
+            &:first-child {
+                background: var(--button-default-bg);
+            }
+        }
+    }
+    .conf-detail-title {
+        font-size: 18px;
+        font-weight: 700;
+    }
+    .conf-detail-textarea {
+        min-height: 200px;
+        border: 1px solid #666d7d;
+        padding: 10px;
+        border-radius: 4px;
+    }
+    .conf-detail-info {
+        &.person-info-container {
+            max-height: 184px;
+            overflow: auto;
+            @include scrollBar(var(--color-user-list-bg), #3B97FF);
+        }
+    }
+}

src/pages/OffPeak/OffPeakShareRecords/ShareParkMgm/loadable.jsx

@@ -5,11 +5,17 @@ import { message, Pagination, Table, Space, Modal, Button } from "antd";
 // import {   useSessionStorageState, useUpdateEffect, useSize, useUpdate } from 'ahooks';
 import ajax from "@/services";
 import { TableModule } from "@/components";
+import InfoModal from "./infoModal";
 import "./index.scss";
 // import errorImg from "@/assets/images/layout/error.png"
 // import {  useLocation } from "react-router-dom";
 
 function ShareParkMgm() {
+  const [visible, setVisible] = useState(false)
+  const [isEdit, setIsEdit] = useState(false)
+  const [editData, setEditData] = useState({})
+  const [timeRulesData, setTimeRulesData] = useState([])
+  const tableRef = useRef(null)
   const columns = [
     {
       title: "序号",
@@ -80,7 +86,57 @@ function ShareParkMgm() {
   ];
 
   const handleEdit = (data) => {
-    console.log(data)
+    setIsEdit(true)
+    setEditData({...data})
+    setVisible(true)
+  }
+
+  const handleAdd = () => {
+    setIsEdit(false)
+    setEditData({})
+    setVisible(true)
+  }
+
+  const handleEditConfirm = (data) => {
+    if (data.id) {
+      ajaxEdit(data).then(msg => {
+        message.success('错峰修改成功')
+        setVisible(false)
+        tableRef.current.fetch()
+      })
+    } else {
+      ajaxAdd(data).then(msg => {
+        message.success('错峰新增成功')
+        setVisible(false)
+        tableRef.current.fetch()
+      })
+    }
+  }
+
+  const ajaxEdit = (data) => {
+    return new Promise((resolved, rejected) => {
+      ajax.shareParkEdit(data).then(res => {
+        if (res.status == 20000) {
+          resolved(res.message)
+        } else {
+          rejected(res.message)
+          message.error(res.message)
+        }
+      })
+    })
+  }
+
+  const ajaxAdd = (data) => {
+    return new Promise((resolved, rejected) => {
+      ajax.shareParkAdd(data).then(res => {
+        if (res.status == 20000) {
+          resolved(res.message)
+        } else {
+          rejected(res.message)
+          message.error(res.message)
+        }
+      })
+    })
   }
 
   //搜索参数初始化
@@ -93,6 +149,17 @@ function ShareParkMgm() {
   const [tableData, setTableData] = useState([]);
   //搜索的总结果数
   const [total, setTotal] = useState(0);
+  
+  const getTimeRulesData = () => {
+    ajax.getTimeRulesData().then(res => {
+      if (res.status == 20000 && res.data.list) {
+        setTimeRulesData(res.data.list)
+      } else {
+        setTimeRulesData([])
+      }
+    })
+  }
+
   function search(params) {
     ajax.getShareParkData(params).then((res) => {
       if (res.status === 20000) {
@@ -102,20 +169,40 @@ function ShareParkMgm() {
     });
   }
 
+  useEffect(() => {
+    getTimeRulesData()
+  }, [])
+
+
   return (
-    <TableModule
-      columns={columns}
-      tableData={tableData}
-      formSearch={formSearch}
-      search={search}
-      total={total}
-    //   mandatory={'parking_num'}
-    //   mandatory_name={'泊位号'}
-    //   pagename="PDA操作记录"
-    //   pageName={'entryExitOptPDA'}
-      initFormData={initFormData}
-      exportUrl="/api/off_peak/park_info/get_share_park_list/export"
-    />
+    <>
+      <TableModule
+        className="share-park-table"
+        columns={columns}
+        tableData={tableData}
+        formSearch={formSearch}
+        search={search}
+        total={total}
+        ref={tableRef}
+        renderAdd={() => (
+          <Button type="primary" className="submit" onClick={handleAdd}>添加</Button>
+        )}
+      //   mandatory={'parking_num'}
+      //   mandatory_name={'泊位号'}
+      //   pagename="PDA操作记录"
+      //   pageName={'entryExitOptPDA'}
+        initFormData={initFormData}
+        exportUrl="/api/off_peak/park_info/get_share_park_list/export"
+      />
+      <InfoModal
+        visible={visible}
+        isEdit={isEdit}
+        onCancel={() => setVisible(false)}
+        onOk={handleEditConfirm}
+        data={editData}
+        timeRulesData={timeRulesData}
+      />
+    </>
   );
 }
 

src/services/OffPeak/index.js

@@ -23,8 +23,34 @@ const getShareParkData = (params) => {
   });
 }
 
+const shareParkEdit = (params) => {
+  return ajax({
+    url: "/api/off_peak/park_info/share_park_edit",
+    type: "post",
+    data: params,
+  });
+}
+
+const shareParkAdd = (params) => {
+  return ajax({
+    url: "/api/off_peak/park_info/share_park_add",
+    type: "post",
+    data: params,
+  });
+}
+
+const getTimeRulesData = () => {
+  return ajax({
+    url: "/api/off_peak/park_info/get_time_rules_list",
+    type: "get",
+  })
+}
+
 export default {
     getBookInfoList,
     getStallCountData,
-    getShareParkData
+    getShareParkData,
+    getTimeRulesData,
+    shareParkEdit,
+    shareParkAdd
 }