Merge branch 'develop' of http://120.27.195.166:3000/chenglb/PMS_Frontend_v1.0.0 into develop

src/assets/css/common.scss

@@ -141,4 +141,24 @@
 // .ant-modal-wrap{
 //   padding-top: 100px;
 //   padding-bottom: 50px;
-// }
+// }
+.start-exception-deal-operate {
+  .ant-popover-inner-content {
+    padding: 5px 5px;
+    width: 100%;
+    .hover,
+    .disabled {
+      padding: 5px 12px;
+      text-align: center;
+    }
+    .hover {
+      &:hover {
+        background-color: #414960;
+      }
+    }
+    .disabled {
+      cursor: no-drop;
+      color: rgba(255, 255, 255, .3);
+    }
+  }
+}

src/assets/css/mixin.scss

@@ -11,15 +11,15 @@
   &::-webkit-scrollbar-track-piece,
   &::-webkit-scrollbar-corner,
   &::-webkit-scrollbar-track {
-    background: #000;
+    background: transparent;
   }
   &::-webkit-scrollbar {
-    width: 4px;
-    height: 4px;
+    width: 12px;
+    height: 12px;
   }
   &::-webkit-scrollbar-thumb {
     background: #9da2ab;
-    border-radius: 2px;
+    border-radius: 4px;
   }
 }
 @mixin hiddenScrollBar() {

src/pages/FinancialMgm/ExceptionDeal/StartExceptionDeal/index.scss

@@ -206,24 +206,3 @@ $color-primary: var(--color-primary);
     background-color: var(--color-tag-bg) !important;
   }
 }
-
-.start-exception-deal-operate {
-  .ant-popover-inner-content {
-    padding: 5px 5px;
-    width: 100%;
-    .hover,
-    .disabled {
-      padding: 5px 12px;
-      text-align: center;
-    }
-    .hover {
-      &:hover {
-        background-color: #414960;
-      }
-    }
-    .disabled {
-      cursor: no-drop;
-      color: rgba(255, 255, 255, .3);
-    }
-  }
-}

src/pages/MerchantMgm/MerchantInfo/loadable.jsx

@@ -114,6 +114,7 @@ const MerchantInfo = (props) => {
   const [companyAddress, setCompanyAddress] = useState([]); // 获取公司地址
   const [clearAccount, setClearAccount] = useState({}); // 清结算模块
   const [clearAccountOpen, setClearAccountOpen] = useState({modalOpen: false, data: {}}); // 清结算模块查看modal
+  const [addEdit,setAddEdit] = useState("待配置") // 清结算模块新增编辑 按钮待配置和编辑
   //表头
   const columns = [
     {
@@ -456,6 +457,7 @@ const MerchantInfo = (props) => {
   //创建商户
   const createData = () => {
     setCreateVisible(true)
+    setAddEdit("待配置")
     setClearAccount({})
     systemForm.setFieldsValue(
       {
@@ -715,6 +717,7 @@ const MerchantInfo = (props) => {
   //编辑
   function updateBtn(record) {
     setUpdateVisible(true)
+    setAddEdit("编辑")
     setEditId(record?.id || "")
     ajax.checkTenant({ id: record.id }).then(
       res => {
@@ -1713,13 +1716,13 @@ const MerchantInfo = (props) => {
                         singleVisible ?
                           <div className="special">
                             <div className="special-name"><span>App(微信支付)</span></div>
-                            <div><button className="special-btn" onClick={showWeiPay}>待配置</button></div>
+                            <div><button className="special-btn" onClick={showWeiPay}>{addEdit}</button></div>
                             <div className="special-name"><span>APP (支付宝支付)</span></div>
-                            <div><button className="special-btn" onClick={showZhiPay}>待配置</button></div>
+                            <div><button className="special-btn" onClick={showZhiPay}>{addEdit}</button></div>
                             <div className="special-name"><span>微信公众号及小程序</span></div>
-                            <div><button className="special-btn" onClick={showWeiMini}>待配置</button></div>
+                            <div><button className="special-btn" onClick={showWeiMini}>{addEdit}</button></div>
                             <div className="special-name"><span>支付宝生活号及小程序</span></div>
-                            <div><button className="special-btn" onClick={showZhiMini}>待配置</button></div>
+                            <div><button className="special-btn" onClick={showZhiMini}>{addEdit}</button></div>
                           </div> : ''
                       }
 
@@ -1727,13 +1730,13 @@ const MerchantInfo = (props) => {
                         specialVisible ?
                           <div className="special">
                             <div className="special-name"><span>App(微信支付)</span></div>
-                            <div><button className="special-btn" onClick={showWeiPay2}>待配置</button></div>
+                            <div><button className="special-btn" onClick={showWeiPay2}>{addEdit}</button></div>
                             <div className="special-name"><span>APP (支付宝支付)</span></div>
-                            <div><button className="special-btn" onClick={showZhiPay2}>待配置</button></div>
+                            <div><button className="special-btn" onClick={showZhiPay2}>{addEdit}</button></div>
                             <div className="special-name"><span>微信公众号及小程序</span></div>
-                            <div><button className="special-btn" onClick={showWeiMini2}>待配置</button></div>
+                            <div><button className="special-btn" onClick={showWeiMini2}>{addEdit}</button></div>
                             <div className="special-name"><span>支付宝生活号及小程序</span></div>
-                            <div><button className="special-btn" onClick={showZhiMini2}>待配置</button></div>
+                            <div><button className="special-btn" onClick={showZhiMini2}>{addEdit}</button></div>
                           </div> : ''
                       }
 

src/pages/OutRoadMgm/OutPersonMgm/TollCollector/index.jsx

@@ -0,0 +1,689 @@
+
+import React, { useState, useRef, useEffect } from "react";
+import { message, Pagination, Table, Select, Input, Button, Popover, Modal, Radio, DatePicker, Transfer } from "antd";
+import { dictionary, utils } from "@/config/common";
+import { useSessionStorageState } from "ahooks";
+import moment from "moment";
+import ajax from "@/services";
+import "./index.scss";
+import { use } from "echarts";
+import { set } from "js-cookie";
+
+function TollCollector() {
+  // 默认数据
+  const defaultData = {
+    operator: "0", // 商户名称
+    account_number: "", // 账号
+    user_name: "", // 姓名
+    user_role: 0, // 角色
+    administer_parking: "", // 管辖车场
+    pn: 1,
+    page_size: dictionary?.pageSizeOptions1[0]
+  };
+  const defaultEdit = {
+    user_name: "", // 姓名
+    sex: "1", // 性别 1: 男 2: 女
+    birth_year: "", // 出生年份
+    person_number: "", // 员工编号
+    account_number: "", // 账号
+    tel: "", // 手机号
+    user_role: "", // 角色
+    depart_id: "", // 所属部门
+    operator: "", // 商户名称
+    park_ids: [], // 停车场Id
+  };
+
+  const [formData, setFormData] = useState(defaultData); // 表单数据
+  const [editData, setEditData] = useState(defaultEdit); // 编辑数据回显
+  const [sessionData, setSessionData] = useSessionStorageState("tollCollector", { value: {} }); // session缓存
+  const [loading, setLoading] = useState(false); // 检索按钮加载状态
+  const [operatorList, setOperatorList] = useState([{ value: "0", label: "全部" }]); // 商户名称查询数据
+  const [operatorEdit, setOperatorEdit] = useState([]); // 商户名称查询数据
+  const [addEditChange, setAddEditChange] = useState(true); // 新增编辑控制开关
+  const [departData, setDepartData] = useState([]); // 所属部门数据
+  const [parkAllData, setParkAllData] = useState([]); // 停车场数据
+  const [parkSelectedKeys, setParkSelectedKeys] = useState([]); // 停车场设置哪些项应该被选中
+  const [editLoad, setEditLoad] = useState(false); // 新增编辑提交加载
+
+  // 在职状态编辑模态框
+  const [jobStatusEditOpen, setJobStatusEditOpen] = useState({
+    open: false,
+    data: {},
+  });
+
+  // 表格返回数据
+  const [resultData, setResultData] = useState({
+    total: 0,
+    list: [],
+  });
+
+  //列表
+  const tableColumns = [
+    {
+      title: "序号",
+      width: 60,
+      align: "center",
+      fixed: 'left',
+      render: (text, record, index) => index + 1,
+    },
+    {
+      title: "商户名称",
+      dataIndex: "operator_name",
+      key: "operator_name",
+      align: "center",
+      render: (text, record, index) => text || "--",
+    },
+    {
+      title: "所属部门",
+      dataIndex: "depart_name",
+      key: "depart_name",
+      align: "center",
+      render: (text, record, index) => text || "--",
+    },
+    {
+      title: "姓名",
+      dataIndex: "user_name",
+      key: "user_name",
+      align: "center",
+      render: (text, record, index) => text || "--",
+    },
+    {
+      title: "手机号",
+      dataIndex: "tel",
+      key: "tel",
+      align: "center",
+      render: (text, record, index) => text || "--",
+    },
+    {
+      title: "账号",
+      dataIndex: "account_number",
+      key: "account_number",
+      align: "center",
+      render: (text, record, index) => text || "--",
+    },
+    {
+      title: "角色",
+      dataIndex: "role_name",
+      key: "role_name",
+      align: "center",
+      render: (text, record, index) => text || "--",
+    },
+    {
+      title: "管辖车场",
+      dataIndex: "administer_parking",
+      key: "administer_parking",
+      align: "center",
+      render: (text, record, index) => text || "--",
+    },
+    {
+      title: "添加时间",
+      dataIndex: "create_time",
+      key: "create_time",
+      align: "center",
+      render: (text, record, index) => text || "--",
+    },
+    {
+      title: "在职状态",
+      dataIndex: "job_status_name",
+      key: "job_status_name",
+      align: "center",
+      render: (text, record, index) => text || "--",
+    },
+    {
+      title: '操作',
+      key: 'operation',
+      dataIndex: 'operation',
+      align: "center",
+      fixed: 'right',
+      width: 100,
+      render: (text, record, index) => {
+        return <>
+          <Popover
+            overlayClassName="start-exception-deal-operate"
+            content={
+              <div className="operateBtn operate-btn" style={{ cursor: "pointer" }} trigger="hover">
+                <div className="hover" onClick={() => $editPersonMeg(record)}>编辑</div>
+                <div
+                  className={record?.job_status == 2 || record?.job_status == 1 ? "hover" : "disabled"}
+                  onClick={() => setJobStatusEditOpen({ open: true, data: record })}
+                >
+                  {record?.job_status == 2 ? "在职" : record?.job_status == 1 ? "离职" : "--"}
+                </div>
+              </div>
+            }
+          >
+            <Button type="primary">操作</Button>
+          </Popover>
+        </>
+      },
+    },
+  ];
+
+
+  // 分页
+  const $changePn = (pn, page_size) => {
+    let temFormData = {};
+    if (formData.page_size == page_size) {
+      temFormData = {
+        ...formData,
+        pn
+      };
+    } else {
+      temFormData = {
+        ...formData,
+        pn: 1,
+        page_size,
+      };
+    };
+    setFormData(temFormData);
+    $getTableList(temFormData);
+  };
+
+  // 获取商户名称
+  const $getAllOperator = () => {
+    ajax.ElectInvoice.getSelectOperator().then((res) => {
+      if (res.status === 20000) {
+        let newArr = [];
+        if (res?.data?.length) {
+          newArr = res?.data?.slice(1)
+          setOperatorList(res.data);
+        };
+        setOperatorEdit(newArr);
+      } else {
+        message.error(res.message);
+      }
+    }).catch((error) => {
+      message.error(error.message);
+    });
+  };
+
+  // 获取停车场数据
+  const $parkAllList = (operator) => {
+    ajax.getParkAllData({operator}).then((res) => {
+      if (res.status === 20000) {
+        let newArr = [];
+        if (res?.data?.length) {
+          res?.data?.map((item) => {
+            newArr.push({
+              key: item?.value || "--",
+              title: item?.label || "--"
+            })
+          })
+          setParkAllData(newArr);
+          return;
+        };
+        setParkAllData([]);
+      } else {
+        setParkAllData([]);
+        message.error(res.message);
+      }
+    }).catch((error) => {
+      setParkAllData([]);
+      message.error(error.message);
+    });
+  };
+
+  // 编辑在职状态
+  const $jobStatusEdit = (value) => {
+    let _data = {};
+    if (!value?.id || !value?.job_status) return message.error("未获取到数据id及在职状态id，请联系管理员！");
+    _data = {
+      id: value.id,
+      job_status: value.job_status == 1 ? 2 : value.job_status == 2 ? 1 : ""
+    };
+    ajax.getJobStatusEdit(_data).then((res) => {
+      if (res.status === 20000) {
+        message.success(res.message || "在职状态修改成功！");
+        $getTableList();
+        setJobStatusEditOpen({ open: false, data: {} });
+      } else {
+        message.error(res.message);
+      }
+    }).catch((error) => {
+      message.error(error.message);
+    });
+  };
+
+  // 新增编辑状态下角色数据
+  const $userRoleData = () => {
+    let arr = [];
+    if (sysConfig?.BPM_ROLE?.length) {
+      arr = sysConfig?.BPM_ROLE.slice(1);
+    }
+    return arr;
+  };
+  // 获取编辑的数据
+  const $editPersonMeg = (value) => {
+    setAddEditChange(false);
+    if (!value?.id) return message.error("未获取到编辑数据id，请重新获取！");
+    ajax.getTollCollectorEdit({ id: value.id }).then((res) => {
+      if (res.status === 20000) {
+        setEditData({
+          id: value.id,
+          user_name: res?.data?.user_name || "", // 姓名
+          sex:  res?.data?.sex || "1", // 性别 1: 男 2: 女
+          birth_year: res?.data?.birth_year || "", // 出生年份
+          person_number: res?.data?.person_number || "", // 员工编号
+          account_number: res?.data?.account_number || "", // 账号
+          tel: res?.data?.tel || "", // 手机号
+          user_role: res?.data?.user_role || "", // 角色
+          operator: res?.data?.operator || "", // 商户名称
+          depart_id: res?.data?.depart_id || "", // 所属部门
+          park_ids: res?.data?.park_ids || [], // 停车场Id
+        });
+        setDepartData([{value: res?.data?.operator, label: res?.data?.operator_name}])
+      } else {
+        message.error(res.message);
+      }
+    }).catch((error) => {
+      message.error(error.message);
+    });
+  };
+
+  // 新增编辑提交
+  const $addEditSubmit = (value) => {
+    // 姓名
+    if(!value?.user_name) {
+      return message.error("请输入姓名！");
+    } else {
+      let reg = /^[\u4E00-\u9FA5]*$/.test(value?.user_name);
+      if(!reg) return message.error("您输入的姓名不合法，必须为汉字！")
+    };
+
+    // 出生年份
+    if(!value?.birth_year) return message.error("请选择出生年份！");
+    
+    // 员工编号
+    if(!value?.person_number) {
+      return message.error("请输入员工编号！");
+    } else {
+      let reg = /[`~!@#$%^&*()_\-+=<>?:"{}|,./;'\\[\]·~！@#￥%……&*（）——\-+={}|《》？：“”【】、；‘'，。、]/g.test(value?.person_number);
+      if(reg) return message.error("您输入的员工编号不合法！");
+    };
+
+    // 账号
+    if(!value?.account_number) {
+      return message.error("请输入账号！");
+    } else {
+      let reg = /^(?![0-9]+$)/g.test(value?.account_number);
+      console.log(reg);
+      if(!reg) return message.error("您输入的账号不合法，不能为纯数字！");
+    };
+
+    // 手机号
+    if(!value?.tel) {
+      return message.error("请输入手机号！");
+    }else {
+      let reg = /^1[3456789]\d{9}$/.test(value.tel);
+      if(!reg) return message.error("您输入的手机号不合法！");
+    };
+
+    // 角色
+    if(!value?.user_role) return message.error("请选择角色！");
+
+    // 商户名称
+    if(!value?.operator) return message.error("请选择商户名称！");
+
+    // 所属部门
+    if(!value?.depart_id) return message.error("请选择所属部门！");
+
+    // 停车场
+    if(!value?.park_ids?.length) return message.error("请选择停车场！");
+    setEditLoad(true);
+    ajax.getAddTollCollector(value).then((res) => {
+      setEditLoad(false);
+      if (res.status === 20000) {
+        setEditData(defaultEdit);
+        message.success(res?.message || value?.id ? "编辑成功" : "新增成功！");
+        setAddEditChange(true);
+        if(value?.id) {
+          $getTableList();
+        } else {
+          let _data = {
+            ...formData,
+            pn: 1,
+            page_size: dictionary?.pageSizeOptions1[0],
+          };
+          setFormData(_data);
+          $getTableList(_data);
+        };
+      } else {
+        message.error(res.message);
+      }
+    }).catch((error) => {
+      setLoading(false);
+      message.error(error.message);
+    });
+  };
+
+  // 获取表格数据
+  const $getTableList = (value = {}) => {
+    let _data = {
+      ...formData,
+      ...value
+    };
+    setLoading(true);
+    setResultData({ list: [], total: 0 });
+    ajax.getAllTollCollectorData(_data).then((res) => {
+      setLoading(false);
+      if (res.status === 20000) {
+        setResultData(res?.data || {});
+      } else {
+        message.error(res.message);
+      }
+    }).catch((error) => {
+      setLoading(false);
+      message.error(error.message);
+    });
+  };
+  useEffect(() => {
+    let _data = {};
+    if (sessionData && Object.values(sessionData).length > 0) {
+      _data = {
+        operator: sessionData?.operator || "0", // 商户名称
+        account_number: sessionData?.account_number || "", // 账号
+        user_name: sessionData?.user_name || "", // 姓名
+        user_role: sessionData?.user_role || 0, // 角色
+        administer_parking: sessionData?.administer_parking || "", // 管辖车场
+        pn: 1,
+        page_size: dictionary?.pageSizeOptions1[0],
+      };
+      setFormData({ ..._data });
+    };
+    $getAllOperator()
+    $getTableList(_data);
+  }, []);
+
+  useEffect(() => {
+    setSessionData(formData);
+  }, [formData]);
+
+  useEffect(() => {
+    if (!editData.operator) {
+      setParkAllData([]);
+      return;
+    };
+    $parkAllList(editData.operator);
+  }, [editData.operator]);
+
+  return (
+    <div className="toll-collector">
+      {addEditChange ?
+        <>
+          <div className="paid-search">
+            <div className="title">查询条件</div>
+            <div className="form-Wrap">
+              <div className="yisa-search">
+                <label>商户名称</label>
+                <Select
+                  className="form-con"
+                  placeholder="请选择商户名称"
+                  getPopupContainer={(node) => node.parentElement}
+                  options={operatorList}
+                  value={formData?.operator || "0"}
+                  onChange={(v) => setFormData({ ...formData, operator: v || "0" })}
+                />
+              </div>
+              <div className="yisa-search">
+                <label>账号</label>
+                <Input
+                  className="form-con"
+                  placeholder="请输入账号"
+                  value={formData?.account_number || ""}
+                  allowClear
+                  onChange={(e) =>
+                    setFormData({ ...formData, account_number: e.target.value || "" })
+                  }
+                />
+              </div>
+              <div className="yisa-search">
+                <label>姓名</label>
+                <Input
+                  className="form-con"
+                  placeholder="请输入姓名"
+                  value={formData?.user_name || ""}
+                  allowClear
+                  onChange={(e) =>
+                    setFormData({ ...formData, user_name: e.target.value || "" })
+                  }
+                />
+              </div>
+              <div className="yisa-search">
+                <label>角色</label>
+                <Select
+                  className="form-con"
+                  placeholder="请选择角色"
+                  getPopupContainer={(node) => node.parentElement}
+                  options={sysConfig.BPM_ROLE || []}
+                  value={formData?.user_role || 0}
+                  onChange={(v) => setFormData({ ...formData, user_role: v || 0 })}
+                />
+              </div>
+              <div className="yisa-search">
+                <label>管辖车场</label>
+                <Input
+                  className="form-con"
+                  placeholder="请输入管辖车场"
+                  value={formData?.administer_parking || ""}
+                  allowClear
+                  onChange={(e) =>
+                    setFormData({ ...formData, administer_parking: e.target.value || "" })
+                  }
+                />
+              </div>
+              <div className="form-btn">
+                <Button
+                  className="reset"
+                  onClick={() => setFormData({ ...defaultData, pn: formData?.pn || 1, page_size: formData?.page_size || dictionary?.pageSizeOptions1[0] })}
+                >
+                  重置
+                </Button>
+                <Button
+                  className="submit"
+                  type="primary"
+                  onClick={() => {
+                    let _data = {
+                      ...formData,
+                      pn: 1,
+                      page_size: dictionary?.pageSizeOptions1[0]
+                    }
+                    setFormData(_data)
+                    $getTableList(_data)
+                  }}
+                  loading={loading}
+                >
+                  查询
+                </Button>
+              </div>
+            </div>
+          </div>
+          <div className="paid-result">
+            <div className="result">
+              <div className="row-head">
+                <span className="number-wrapper">共查询到<span className="total-number"> {resultData.total || 0} </span>条结果</span>
+                <Button type="primary" className="colorBtn" onClick={() => setAddEditChange(false)}>添加</Button>
+              </div>
+              <div className="result-data">
+                <Table
+                  rowKey={(row) => row.id}
+                  className="table yisa-table-scroll"
+                  dataSource={resultData?.list || []}
+                  columns={tableColumns}
+                  pagination={false}
+                  loading={loading}
+                  scroll={{ y: "calc(100% - 50px)" }}
+                />
+                <Pagination
+                  className="pagination-common"
+                  showSizeChanger={true}
+                  showQuickJumper={true}
+                  showTotal={() => `共 ${resultData.total || 0} 条`}
+                  total={resultData.total}
+                  current={formData.pn}
+                  pageSize={formData.page_size}
+                  pageSizeOptions={dictionary?.pageSizeOptions1}
+                  onChange={$changePn}
+                />
+              </div>
+            </div>
+          </div>
+        </>
+        :
+        <div className="paid-search add-edit-content">
+          <div className="form-Wrap">
+            <div className="yisa-search">
+              <label><em>*</em>姓名</label>
+              <Input
+                className="form-con"
+                placeholder="请输入姓名(必须为汉字)"
+                value={editData?.user_name || ""}
+                allowClear
+                onChange={(e) =>{
+                  // let reg = /^[\u4E00-\u9FA5]*$/.test(e.target.value);
+                  setEditData({ ...editData, user_name: e.target.value || "" })
+                }}
+              />
+            </div>
+            <div className="yisa-search">
+              <label><em>*</em>性别</label>
+              <Radio.Group
+                name="radiogroup"
+                value={editData?.sex || "1"}
+                onChange={(e) =>
+                  setEditData({ ...editData, sex: e.target.value || "1" })
+                }
+              >
+                <Radio value={"1"}>男</Radio>
+                <Radio value={"2"}>女</Radio>
+              </Radio.Group>
+            </div>
+            <div className="yisa-search">
+              <label><em>*</em>出生年份</label>
+              <DatePicker
+                showTime
+                value={editData.birth_year ? moment(editData.birth_year + '') : ''}
+                picker="year"
+                placeholder="请选择年份"
+                onChange={(e) => { setEditData({ ...editData, birth_year: e ? e.format('YYYY') : "" }) }}
+                disabledDate={(current) => current && current > moment().endOf('year')}
+              />
+            </div>
+            <div className="yisa-search">
+              <label><em>*</em>员工编号</label>
+              <Input
+                className="form-con"
+                placeholder="请输入员工编号(不能存在特殊符号)"
+                value={editData?.person_number || ""}
+                allowClear
+                onChange={(e) =>
+                  setEditData({ ...editData, person_number: e.target.value || "" })
+                }
+              />
+            </div>
+            <div className="yisa-search">
+              <label><em>*</em>账号</label>
+              <Input
+                className="form-con"
+                placeholder="请输入账号(不能为纯数字)"
+                value={editData?.account_number || ""}
+                allowClear
+                onChange={(e) =>
+                  setEditData({ ...editData, account_number: e.target.value || "" })
+                }
+              />
+            </div>
+            <div className="yisa-search">
+              <label><em>*</em>手机号</label>
+              <Input
+                className="form-con"
+                placeholder="请输入手机号"
+                value={editData?.tel || ""}
+                allowClear
+                onChange={(e) =>
+                  setEditData({ ...editData, tel: e.target.value || "" })
+                }
+              />
+            </div>
+            <div className="yisa-search">
+              <label><em>*</em>角色</label>
+              <Select
+                className="form-con"
+                placeholder="请选择角色"
+                getPopupContainer={(node) => node.parentElement}
+                options={$userRoleData()}
+                value={editData?.user_role || null}
+                onChange={(v) => setEditData({ ...editData, user_role: v || "" })}
+              />
+            </div>
+            <div className="yisa-search">
+              <label><em>*</em>商户名称</label>
+              <Select
+                className="form-con"
+                placeholder="请选择商户名称"
+                getPopupContainer={(node) => node.parentElement}
+                options={operatorEdit}
+                value={editData?.operator || null}
+                onChange={(v, option) => {
+                  setEditData({ ...editData, operator: v || "", depart_id: "" });
+                  setDepartData(option ? [option] : []);
+                }}
+              />
+            </div>
+            <div className="yisa-search">
+              <label><em>*</em>所属部门</label>
+              <Select
+                className="form-con"
+                placeholder="请选择所属部门"
+                getPopupContainer={(node) => node.parentElement}
+                options={departData}
+                value={editData?.depart_id || null}
+                onChange={(v) => setEditData({ ...editData, depart_id: v || "" })}
+              />
+            </div>
+            <div className="yisa-search">
+              <label><em>*</em>选择停车场</label>
+              <Transfer
+                dataSource={parkAllData}
+                titles={['未选择', '已选择']}
+                targetKeys={editData?.park_ids || []}
+                selectedKeys={parkSelectedKeys}
+                onChange={(next) => setEditData({ ...editData, park_ids: next || "" })}
+                onSelectChange={(source, target) => {
+                  setParkSelectedKeys([...source, ...target])
+                }}
+                render={(item) => item.title}
+              />
+            </div>
+            <div className="form-btn">
+              <Button
+                className="reset"
+                type="primary"
+                onClick={() => $addEditSubmit(editData)}
+                loading={editLoad}
+              >
+                提交
+              </Button>
+              <Button
+                className="reset"
+                onClick={() => { setAddEditChange(true); setEditData(defaultEdit) }}
+              >
+                取消
+              </Button>
+            </div>
+          </div>
+        </div>
+      }
+
+      <Modal
+        title="提示"
+        open={jobStatusEditOpen.open}
+        onOk={() => $jobStatusEdit(jobStatusEditOpen.data)}
+        onCancel={() => { setJobStatusEditOpen({ open: false, data: {} }) }}
+      >
+        <p>此操作将改变在职状态, 是否继续?</p>
+      </Modal>
+    </div>
+  );
+}
+
+export default TollCollector;

src/pages/OutRoadMgm/OutPersonMgm/TollCollector/index.scss

@@ -0,0 +1,153 @@
+@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);
+
+.toll-collector {
+  display: flex;
+  padding-top: 10px;
+  width: 100%;
+  height: 100%;
+
+  .paid-search {
+    display: block;
+    width: 375px;
+    padding: 10px 10px 20px 20px;
+
+    .title {
+      width: 100%;
+      font-size: 16px;
+      font-family: Microsoft YaHei, Microsoft YaHei-Bold;
+      font-weight: 700;
+      text-align: left;
+      color: var(--color-text);
+      margin-bottom: 20px;
+    }
+
+    .yisa-search {
+      width: 100%;
+      display: flex;
+      align-items: center;
+      margin-bottom: 24px;
+
+      >label {
+        color: var(--color-search-list-item-text);
+        flex: 0 0 25%;
+        max-width: 25%;
+        text-align: right;
+        padding-right: 8px;
+      }
+
+      .form-con {
+        flex: 1;
+        width: 220px;
+      }
+    }
+
+    .form-Wrap {
+      height: calc(100% - 45px);
+      overflow-y: auto;
+      scrollbar-width: none;
+      -ms-overflow-style: none;
+
+      &::-webkit-scrollbar {
+        display: none;
+      }
+    }
+
+    .form-btn {
+      display: flex;
+      flex-flow: row nowrap;
+      padding: 0 10px;
+      justify-content: space-between;
+
+      .reset {
+        width: 90px;
+        height: 36px;
+        border-radius: 4px;
+      }
+
+      .submit {
+        width: calc(100% - 100px);
+        height: 36px;
+        border-radius: 4px;
+      }
+    }
+
+    .ant-select-selector,
+    .ant-picker,
+    .ant-input {
+      background-color: var(--color-search-list-item-bg) !important;
+      box-shadow: none !important;
+      color: var(--color-search-list-item-value);
+      border-color: var(--color-search-list-item-bd) !important;
+    }
+  }
+
+  .paid-result {
+    width: calc(100% - 375px);
+    padding-bottom: 15px;
+    padding: 20px;
+    background: var(--color-user-list-bg);
+    border-top-left-radius: 20px;
+    box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.08);
+
+    .result {
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+
+      .row-head {
+        height: 32px;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 13px;
+
+        .total-number {
+          margin: 0 2px;
+          color: var(--color-primary);
+        }
+
+        .colorBtn {
+          height: 36px;
+          border-radius: 4px;
+        }
+      }
+
+      .result-data {
+        width: 100%;
+        height: calc(100% - 45px - 47px);
+      }
+    }
+  }
+
+  .add-edit-content {
+    width: 565px;
+    .form-Wrap {
+      height: 100%;
+    }
+
+    .yisa-search {
+      >label {
+        >em {
+          margin-right: 5px;
+          color: #a61d24;
+        }
+      }
+
+      .ant-picker {
+        flex: 1;
+      }
+    }
+    .form-btn {
+      justify-content: center;
+      .reset {
+        &:last-child {
+          margin-left: 40px;
+        }
+      }
+    }
+  }
+}

src/pages/OutRoadMgm/OutPersonMgm/TransitionReport/index.jsx

@@ -0,0 +1,22 @@
+
+import React, { useState, useRef, useEffect } from "react";
+import { message, Pagination, Table, Select, Input, DatePicker, Button, Popover } from "antd";
+import { dictionary, utils } from "@/config/common";
+import moment from "moment";
+import { useSessionStorageState } from "ahooks";
+import ajax from "@/services";
+import { QuickMenu } from "@/components";
+import RecordReviewModal from "@/components/ParkingRecordModal/RecordReviewModal";
+import "./index.scss";
+
+function TransitionReport() {
+  
+
+  return (
+    <div className="transition-report">
+      交接班报表
+    </div>
+  );
+}
+
+export default TransitionReport;

src/pages/OutRoadMgm/OutPersonMgm/index.jsx

@@ -0,0 +1,7 @@
+import TollCollector from "./TollCollector"
+import TransitionReport from "./TransitionReport"
+
+export default {
+    TollCollector,
+    TransitionReport,
+}

src/pages/OutRoadMgm/index.jsx

@@ -3,11 +3,13 @@ import OutRoadOverview from "./OutRoadOverview"
 import OutExceptionMgm from "./OutExceptionMgm"
 import OutDeviceMgm from "./OutDeviceMgm"
 import OutBusinessRecord from "./OutBusinessRecord"
+import OutPersonMgm from "./OutPersonMgm"
 
 export default {
     ...OutSegmentMgm,
     OutRoadOverview,
     ...OutExceptionMgm,
     ...OutDeviceMgm,
-    ...OutBusinessRecord
+    ...OutBusinessRecord,
+    ...OutPersonMgm
 }

src/router/router.config.js

@@ -1198,6 +1198,19 @@ let routes = [
         component: pages.ZombieCarMgm,
       },
       {
+        // --------------人员管理
+        path: "/outRoad/tollCollector",
+        text: "收费员管理",
+        name: "tollCollector",
+        component: pages.TollCollector,
+      },
+      {
+        path: "/outRoad/transitionReport",
+        text: "交接班报表",
+        name: "transitionReport",
+        component: pages.TransitionReport,
+      },
+      {
         // ----------------异常管理
         path: "/outRoad/liftUpPoleRecord",
         text: "抬杆记录",

src/services/OutRoadMgm/OutPersonMgm.js

@@ -0,0 +1,57 @@
+import ajax from "@/config/ajax";
+// --人员管理--
+export default {
+
+  // -- 收费员管理 --
+
+  // 获取收费员管理--表格数据
+  getAllTollCollectorData: (data) => {
+    return ajax({
+      url: "/api/orp/road/get_all_person_list",
+      type: "post",
+      data,
+    });
+  },
+
+  // 收费员管理--编辑在职状态
+  getJobStatusEdit: (data) => {
+    return ajax({
+      url: "/api/orp/road/change_Job_status",
+      type: "post",
+      data,
+    });
+  },
+
+  // 收费管理员--编辑获取回显数据
+  getTollCollectorEdit: (data) => {
+    return ajax({
+      url: "/api/orp/road/get_user_info",
+      type: "get",
+      data,
+    });
+  },
+
+  // 收费员管理--停车场数据
+  getParkAllData: (data) => {
+    return ajax({
+      url: "/api/orp/road/get_all_park",
+      type: "get",
+      data,
+    });
+  },
+
+  // 收费管理员--新增
+  getAddTollCollector: (data) => {
+    let url = data?.id ? "/api/orp/road/orp_road_edit" : "/api/orp/road/orp_road_add"
+    return ajax({
+      url,
+      type: "post",
+      data,
+    });
+  },
+
+
+
+
+  // -- 交接班报表 --
+};

src/services/OutRoadMgm/index.js

@@ -8,6 +8,7 @@ import OutPayOrders from "./OutPayOrders";
 import ChargeRulesMgm from "./ChargeRulesMgm";
 import OutRoadOverview from "./OutRoadOverview";
 import OutParkingArrearsOrders from "./OutParkingArrearsOrders";
+import OutPersonMgm from "./OutPersonMgm";
 export default {
   ...OutSegment,
   ...ZombieCarMgm,
@@ -19,4 +20,5 @@ export default {
   ...ChargeRulesMgm,
   ...OutRoadOverview,
   ...OutParkingArrearsOrders,
+  ...OutPersonMgm,
 };