chenglb
/
PMS_Frontend_v1.0.0
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

feat(): 新增错时时间管理规则详情和时间规则页面

tags/PMS_V1.0.0_Alpha5
何欢 1 year ago
parent
7fa8c52616
commit
c5fd89cb2c
12 changed files with 1082 additions and 281 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 4
      src/components/TableModule/index.jsx
  2. 2
      src/components/layout/Tabs/index.jsx
  3. 6
      src/pages/OffPeak/OffPeakTimeMgm/ManagementTime/index.jsx
  4. 15
      src/pages/OffPeak/OffPeakTimeMgm/ManagementTime/index.scss
  5. 262
      src/pages/OffPeak/OffPeakTimeMgm/ManagementTime/loadable.jsx
  6. 58
      src/pages/OffPeak/OffPeakTimeMgm/RuleDetail/index.scss
  7. 514
      src/pages/OffPeak/OffPeakTimeMgm/RuleDetail/loadable.jsx
  8. 33
      src/pages/OffPeak/OffPeakTimeMgm/TimeRule/index.scss
  9. 361
      src/pages/OffPeak/OffPeakTimeMgm/TimeRule/loadable.jsx
  10. 4
      src/pages/OffPeak/OffPeakTimeMgm/index.jsx
  11. 8
      src/router/router.config.js
  12. 96
      src/services/OffPeak/index.js

4
src/components/TableModule/index.jsx
View File

@ -565,9 +565,9 @@ const TableModule = forwardRef((props, ref) => {
key={item.name}
>
{item.hiddenCount ? (
<Input placeholder={item.placeholder} />
<Input placeholder={item.placeholder} autoComplete={item.autoComplete?item.autoComplete:null} />//autoComplete输入框是否显示自动填充
) : (
<Input {...inputParams} placeholder={item.placeholder} />
<Input {...inputParams} placeholder={item.placeholder} autoComplete={item.autoComplete?item.autoComplete:null}/>
)}
</Form.Item>
);

2
src/components/layout/Tabs/index.jsx
View File

@ -144,7 +144,7 @@ export default function Tabs() {
provided.draggableProps.style
)}
>
<div className={`tab ${selectedKey == item.path ? 'active' : ''}`}>
<div className={`tab ${item.path.indexOf(selectedKey)>-1 ? 'active' : ''}`}>
<span className="tab-text" onClick={() => { handleClick(item) }}>{item.text}</span>
<span className="close" onClick={() => { handleClose(item, index) }}> <Icon type={"guanbi2"} /></span>
</div>

6
src/pages/OffPeak/OffPeakTimeMgm/ManagementTime/index.jsx
View File

@ -0,0 +1,6 @@
import React from "react"
import loadable from "@loadable/component"
import { LoadingImg } from "@/components"
const TimeRuleLoadable = loadable(() => import("./loadable"))
export default (pros) => <TimeRuleLoadable {...pros} fallback={<LoadingImg />} />

15
src/pages/OffPeak/OffPeakTimeMgm/ManagementTime/index.scss
View File

@ -0,0 +1,15 @@
.ant-table-selection-col {
width: 50px;
}
.modal-rule-detail{
.ant-modal-body{
display: flex;
justify-content: center;
}
.form-container{
width: 400px;
.cc-form-input,.cc-form-select{
margin-bottom: 10px;
}
}
}

262
src/pages/OffPeak/OffPeakTimeMgm/ManagementTime/loadable.jsx
View File

@ -0,0 +1,262 @@
import React, { useState, useRef, useEffect } from "react";
import { message, Pagination, Table, Space, Modal, Button ,Popover,Input,TimePicker} from "antd";
import ajax from "@/services";
import { TableModule ,FormInput,FormSelect,FormDatePicker} from "@/components";
import { useSelector, useDispatch } from "react-redux"
import "./index.scss";
// import errorImg from "@/assets/images/layout/error.png"
import { useParams } from "react-router-dom";
const { TextArea } = Input;
function ManagementTime(props) {
const id = new URLSearchParams(location.href).get("id");
const columns = [
{
title: "名称",
dataIndex: "name",
align: "center",
key:"name",
},
{
title: "日期类型",
dataIndex: "date_type",
key: "date_type",
align: "center",
},
{
title: "开始时间",
dataIndex: "start_time",
align: "center",
key:"start_time",
},
{
title: "结束时间",
dataIndex: "end_time",
key: "end_time",
align: "center",
},
{
title: "是否可进场",
dataIndex: "is_in",
key: "is_in",
align: "center",
render: (text, record, index) => (
<div >{record.is_in==1?"是":"否"}</div>
)
},
{
title: "是否可出场",
dataIndex: "is_out",
align: "center",
key: "is_out",
render: (text, record, index) => (
<div >{record.is_out==1?"是":"否"}</div>
)
},
{
title: "备注",
dataIndex: "remarks",
align: "center",
key:"remarks",
},
{
title: "操作",
align: "center",
render: (text, record) => {
return (
<>
<Button type="primary"
onClick={()=>{
Modal.confirm({
title: `提示`,
content: `是否确认删除选中的数据项？`,
onOk: () => {
ajax.getDelRuleLink({ids:[record.id]}).then((res) => {
if (res.status === 20000) {
message.success('删除成功')
tableRef.current.fetch(1,{})
}else {
message.error(res?.message);
}
});
}
})}}>删除</Button>
{/* </Popover> */}
</>
);
},
},
];
const formSearch = [
{
type: "Select",
label: "日期类型",
name: "date_type",
placeholder:"请选择日期类型",
options: [
{
label: "全部",
value: "0",
},
{
label: "公休日",//1公休日、2工作日、3节假日
value: "1",
},
{
label: "工作日",
value: "2",
},
{
label: "节假日",
value: "3",
},
],
},
// {
// type: "RangePicker",
// label: "操作时间",
// name: "operationTime",
// },
];
//搜索参数初始化
const initFormData = {
date_type:"0",
};
const tableRef = useRef(null);
const [visible, setVisible] = useState(false);
// 新增数据
const [rowData, setRowData] = useState({
ids: [],
});
//规则下拉
const [ruleLinkList, setRuleLinkList] = useState([]);
//搜索的结果
const [tableData, setTableData] = useState([]);
//搜索的总结果数
const [total, setTotal] = useState(10);
const [tableSelectCheck, setTableSelectCheck] = useState([]); // 列表选中的id
function search(params) {
ajax.getRuleLinkList({...params,rule_id:id}).then((res) => {
if (res.status === 20000) {
let data=res.data.list
data.map((item,index)=>{
item.key=item.id
})
setTableData(data);
setTotal(res.data.total);
}
});
}
function addButton() {
return ([<Button
type="primary"
onClick={() => {
setVisible(true);
ajax.getRuleDetailsSelect({rule_id:id}).then((res) => {
if (res.status === 20000) {
setRuleLinkList(res.data.list)
}
});
}}
>
添加
</Button>,<Button
type="primary"
onClick={() => {
Modal.confirm({
title: `提示`,
content: `是否确认删除选中的数据项？`,
onOk: () => {
ajax.getDelRuleLink({ids:tableSelectCheck}).then((res) => {
if (res.status === 20000) {
message.success('删除成功')
tableRef.current.fetch(1,{})
}else {
message.error(res?.message);
}
});
}
})
}}
>
删除
</Button>]
);
}
// 确定
const handleOk = () => {
if(rowData.ids.length==0){
message.destroy();
message.warning(`时间规则不可为空`);
return
}
ajax.getRuleLinkAdd(rowData).then((res) => {
if (res.status === 20000) {
setVisible(false);
message.success("新增成功")
setRowData({ids:[]})
tableRef.current.fetch(1,{})
}else {
message.error(res?.message);
}
});
}
// 取消
const onCancel = () => {
setVisible(false);
};
return (
<>
<TableModule
ref={tableRef}
columns={columns}
tableData={tableData}
formSearch={formSearch}
search={search}
total={total}
initFormData={initFormData}
rightButtonGroup={addButton()}
rowSelection={{
selectedRowKeys: tableSelectCheck,
onChange: (selectedRowKeys, selectedRows) => {
console.log(selectedRowKeys, selectedRows);
setTableSelectCheck(selectedRowKeys)
},
type: "checkbox"
}}
isExport={false}
/>
<Modal
open={visible}
width={720}
onCancel={onCancel}
onOk={handleOk}
className="modal-rule-detail"
title={"添加时间规则关联"}
afterClose={()=>{
setRowData({
ids: []
})
}}
>
<div className="form-container">
<FormSelect
yisaLabel="时间规则"
mode="multiple"
yisaData={ruleLinkList}
defaultValue={rowData.ids || 0}
placeholder="请选择时间规则"
hasUnlimited={false}
required={true}
showClose={false}
onChange={e => { setRowData({ ids: e }) }}
/>
</div>
</Modal>
</>
);
}
export default ManagementTime;

58
src/pages/OffPeak/OffPeakTimeMgm/RuleDetail/index.scss
View File

@ -0,0 +1,58 @@
.modal-rule-detail{
.ant-modal-body{
display: flex;
justify-content: center;
}
.form-container{
width: 400px;
.cc-form-input,.cc-form-select{
margin-bottom: 10px;
}
.yisa-search{
display: flex;
align-items: center;
margin-bottom: 10px;
.modal-start-time{
display: flex;
justify-content: right;
margin-right: 10px;
text-align: right;
width: calc(100% - 274px - 10px);
}
.ant-picker{
width: 274px;
}
label{
color: var(--color-search-list-item-text);
}
.redLogo{
margin-right:0px;
color: #ef5454;
}
.line{
width: calc(100% - 249px - 10px);
margin-right: 10px;
text-align: right;
color: var(--color-search-list-item-text);
}
.ant-input{
width: 274px;
}
}
.form-select-single-name{
em{
margin-right:0px;
color: #ef5454;
}
}
}
}
.operateBtn {
div {
cursor: pointer;
margin-top: 5px;
}
}

514
src/pages/OffPeak/OffPeakTimeMgm/RuleDetail/loadable.jsx
View File

@ -1,161 +1,401 @@
import React, { useState, useRef, useEffect } from "react";
import { message, Pagination, Table, Space, Modal, Button } from "antd";
import { message, Pagination, Table, Space, Modal, Button ,Popover,Input,TimePicker} from "antd";
// import { dictionary, utils } from "@/config/common";
// import moment from 'moment'
// import { useSessionStorageState, useUpdateEffect, useSize, useUpdate } from 'ahooks';
import ajax from "@/services";
import { TableModule } from "@/components";
// import "./index.scss";
import { TableModule ,FormInput,FormSelect} from "@/components";
import "./index.scss";
import moment from "moment";
// import errorImg from "@/assets/images/layout/error.png"
// import { useLocation } from "react-router-dom";
const { TextArea } = Input;
function RuleDetail() {
const selectData= [
{
label: "全部",
value: "0",
},
{
label: "公休日",//1公休日、2工作日、3节假日
value: "1",
},
{
label: "工作日",
value: "2",
},
{
label: "节假日",
value: "3",
},
]
const modalSelectData= [
{
label: "否",
value: 0,
},
{
label: "是",
value: 1,
},
]
const listData={
name: "",
date_type:"",
start_time: '00:00:00',
end_time: '23:59:59',
is_in: "",
is_out: "",
remarks: "",
}
const columns = [
// {
// title: "序号",
// dataIndex: "index",
// key: "index",
// align:"center",
// render: (_, record, index) => {
// return index + 1;
// },
// },
// {
// title: "商户名称",
// dataIndex: "merchantName",
// align: "center",
// render: (text, record, index) => (
// <div style={{ width: "100px", wordBreak: "break-all" }}>{record.merchantName}</div>
// )
// },
// {
// title: "操作人",
// dataIndex: "operator",
// key: "operator",
// align: "center",
// },
// {
// title: "车牌号",
// dataIndex: "licensePlateNumber",
// align: "center",
// render: (text, record, index) => (
// <div style={{ width: "100px", wordBreak: "break-all" }}>{record.licensePlateNumber}</div>
// )
// },
// {
// title: "路段",
// dataIndex: "section",
// key: "section",
// align: "center",
// },
// {
// title: "泊位号",
// dataIndex: "parkingSpotNumber",
// key: "parkingSpotNumber",
// align: "center",
// },
// {
// title: "出入场类型",
// dataIndex: "entryExitType",
// align: "center",
// key: "entryExitType",
// },
// {
// title: "出入场时间",
// dataIndex: "entryExitTime",
// align: "center",
// render: (text, record, index) => (
// <div style={{ width: "130px", wordBreak: "break-all" }}>{record.entryExitTime}</div>
// )
// },
// {
// title: "操作时间",
// dataIndex: "operationTime",
// align: "center",
// render: (text, record, index) => (
// <div style={{ width: "130px", wordBreak: "break-all" }}>{record.operationTime}</div>
// )
// },
// {
// title: "间隔时长",
// dataIndex: "intervalDuration",
// key: "intervalDuration",
// align: "center",
// },
{
title: "序号",
dataIndex: "index",
key: "index",
align:"center",
render: (_, record, index) => {
return index + 1;
},
},
{
title: "名称",
dataIndex: "name",
align: "center",
},
{
title: "日期类型",
dataIndex: "date_type",
key: "date_type",
align: "center",
},
{
title: "开始时间",
dataIndex: "start_time",
align: "center",
},
{
title: "结束时间",
dataIndex: "end_time",
key: "end_time",
align: "center",
},
{
title: "是否可进场",
dataIndex: "is_in",
key: "is_in",
align: "center",
render: (text, record, index) => (
<div >{record.is_in==1?"是":"否"}</div>
)
},
{
title: "是否可出场",
dataIndex: "is_out",
align: "center",
key: "is_out",
render: (text, record, index) => (
<div >{record.is_out==1?"是":"否"}</div>
)
},
{
title: "备注",
dataIndex: "remarks",
align: "center",
},
{
title: "操作",
align: "center",
render: (text, record) => {
return (
<>
<Popover
content={
<div className="operateBtn">
<div
onClick={() => {
setActionState("edit");
setVisible(true);
setEditId(record.id)
setRowData({
...rowData,
name: record.name,
date_type:record.date_type,
start_time: record.start_time,
end_time: record.end_time,
is_in: record.is_in,
is_out: record.is_out,
remarks: record.remarks,
})
}}
>
编辑
</div>
<div
onClick={() => {
handleDel(record);
}}
>
删除
</div>
</div>
}
>
<Button type="primary">操作</Button>
</Popover>
</>
);
},
},
];
const formSearch = [
// {
// type: "Select",
// label: "商户名称",
// name: "merchantName",
// placeholder:"请选择商户名称"
// },
// {
// type: "Input",
// label: "路段",
// placeholder: "请输入路段",
// name: "road_name",
// },
// {
// type: "Input",
// label: "泊位号",
// placeholder: "请输入泊位号",
// name: "parking_num",
// },
// {
// type: "Input",
// label: "操作人",
// placeholder: "请输入操作人",
// name: "operator",
// },
// {
// type: "Input",
// label: "间隔时长大于分钟数",
// placeholder: "请输入内容",
// name: "exceedTime",
// },
// {
// type: "RangePicker",
// label: "操作时间",
// name: "operationTime",
// },
{
type: "Input",
label: "名称",
placeholder: "请输入名称",
autoComplete:"off",
name: "name",
},
{
type: "Select",
label: "日期类型",
name: "date_type",
placeholder:"请选择日期类型",
options:selectData
},
];
const tableRef = useRef(null);
//搜索参数初始化
const initFormData = {
merchantName: "0",
road_name: "",
parking_num: "",
operator: "",
exceedTime: "",
name: "",
date_type: "0",
};
const [visible, setVisible] = useState(false);
const [actionState, setActionState] = useState(null); //操作状态
// 新增数据
const [rowData, setRowData] = useState(listData);
//搜索的结果
const [tableData, setTableData] = useState([]);
//搜索的总结果数
const [total, setTotal] = useState(0);
const [total, setTotal] = useState(10);
//储存编辑的id
const [editId,setEditId] = useState("");
function search(params) {
// ajax.getPDAList(params).then((res) => {
// if (res.status === 20000) {
// setTableData(res.data.list);
// setTotal(res.data.total);
// }
// });
ajax.getTimeRuleDetailsList(params).then((res) => {
if (res.status === 20000) {
setTableData(res.data.list);
setTotal(res.data.total);
}
});
}
function addButton() {
return (
<Button
type="primary"
onClick={() => {
setActionState("add");
setVisible(true);
}}
>
添加
</Button>
);
}
// 确定
const handleOk = () => {
if(!rowData.name){
message.destroy();
message.warning(`名称不可为空`);
return
}else if(!rowData.date_type){
message.destroy();
message.warning(`日期类型不可为空`);
return
}
else if(rowData.start_time==rowData.end_time){
message.destroy();
message.warning(`开始时间不能与结束时间相同！`);
return
}
else if(rowData.is_in===""){
message.destroy();
message.warning(`是否可进入不可为空`);
return
}
else if(rowData.is_out===""){
message.destroy();
message.warning(`是否可出场不可为空`);
return
}
let data = rowData
if(actionState=="edit"){
data={...rowData,id:editId}
Modal.confirm({
title: `提示`,
content: `修改的数据可能导致已绑定的数据出错，是否修改？`,
onOk: () => {addAjax(data,'修改成功')}
})
}else{
addAjax(data,'新增成功')
}
}
//新增修改函数
const addAjax = (data,messageDate) => {
ajax.getTimeRuleDetailsAdd(data).then((res) => {
if (res.status === 20000) {
setVisible(false);
message.success(messageDate)
setRowData(listData)
tableRef.current.fetch(1,{})
}else {
message.error(res?.message);
}
});
}
const handleDel = (record) => {
Modal.confirm({
title: `提示`,
content: `是否确认删除选中的数据项？`,
onOk: () => {
ajax.delTimeRuleDetails({id:record.id}).then((res) => {
if (res.status === 20000) {
message.success('删除成功')
tableRef.current.fetch(1,{})
}else {
message.error(res?.message);
}
});
}
})
}
// 取消
const onCancel = () => {
setActionState(null);
setVisible(false);
};
// 弹窗标题
const getModalTitle = (key) => {
switch (key) {
case "edit":
return "修改时间详情";
case "add":
return "添加时间详情";
default:
break;
}
};
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/bpm/record/get_pda_export"
/>
<>
<TableModule
ref={tableRef}
columns={columns}
tableData={tableData}
formSearch={formSearch}
search={search}
total={total}
mandatory={'parking_num'}
initFormData={initFormData}
rightButtonGroup={[addButton()]}
isExport={false}
/>
<Modal
open={visible}
width={720}
onCancel={onCancel}
onOk={handleOk}
className="modal-rule-detail"
destroyOnClose
title={getModalTitle(actionState)}
afterClose={()=>{
setRowData({
name: "",
date_type:"",
start_time: '00:00:00',
end_time: '23:59:59',
is_in: "",
is_out: "",
remarks: "",
})
}}
>
<div className="form-container">
<FormInput
isRequired={true}
yisaLabel="名称"
placeholder="请输入规则名称"
value={rowData.name}
showClose={true}
onChange={e => { setRowData({ ...rowData, name: e.target.value }) }}
/>
<FormSelect
yisaLabel="日期类型"
yisaData={selectData}
defaultValue={rowData.date_type || null}
placeholder="请选择日期类型"
hasUnlimited={false}
required={true}
showClose={false}
onChange={e => { setRowData({ ...rowData,date_type: e }) }}
/>
<div className="yisa-search">
<div className="modal-start-time">
<div className="redLogo">*</div>
<label>开始时间</label>
</div>
<TimePicker
allowClear={false}
value={moment(rowData.start_time, 'HH:mm:ss')}
onChange={(time, timeString) => {setRowData({ ...rowData,start_time: timeString })}}
/>
</div>
<div className="yisa-search">
<div className="modal-start-time">
<div className="redLogo">*</div>
<label>结束时间</label>
</div>
<TimePicker
// format={format}
allowClear={false}
value={moment(rowData.end_time, 'HH:mm:ss')}
onChange={(time, timeString) => {setRowData({ ...rowData,end_time: timeString })}}
/>
</div>
<FormSelect
yisaLabel="是否可以进入"
yisaData={modalSelectData}
defaultValue={rowData.is_in || null}
placeholder="请选择是否可以进入"
hasUnlimited={false}
required={true}
showClose={false}
onChange={e => { setRowData({ ...rowData,is_in: e }) }}
/>
<FormSelect
yisaLabel="是否可以出场"
yisaData={modalSelectData}
defaultValue={rowData.is_out || null}
placeholder="请选择是否可以出场"
hasUnlimited={false}
required={true}
showClose={false}
onChange={e => { setRowData({ ...rowData, is_out: e }) }}
/>
<div className="yisa-search">
<label className="line">备注</label>
<TextArea
showCount
placeholder="请输入"
maxLength={150}
value={rowData.remarks || ""}
style={{ height: 120}}
onChange={e => { setRowData({ ...rowData, remarks: e.target.value }) }}
/>
</div>
</div>
</Modal>
</>
);
}

33
src/pages/OffPeak/OffPeakTimeMgm/TimeRule/index.scss
View File

@ -0,0 +1,33 @@
.modal-rule-detail{
.ant-modal-body{
display: flex;
justify-content: center;
}
.form-container{
width: 400px;
.cc-form-input{
margin-bottom: 10px;
}
.yisa-search{
display: flex;
align-items: center;
margin-bottom: 10px;
.line{
width: calc(100% - 249px - 10px);
margin-right: 10px;
text-align: right;
color: var(--color-search-list-item-text);
}
.ant-input{
width: 274px;
}
}
}
}
.operateBtn {
div {
cursor: pointer;
margin-top: 5px;
}
}

361
src/pages/OffPeak/OffPeakTimeMgm/TimeRule/loadable.jsx
View File

@ -1,161 +1,250 @@
import React, { useState, useRef, useEffect } from "react";
import { message, Pagination, Table, Space, Modal, Button } from "antd";
import { message, Pagination, Table, Space, Modal, Button,Popover ,Input} from "antd";
// import { dictionary, utils } from "@/config/common";
// import moment from 'moment'
// import { useSessionStorageState, useUpdateEffect, useSize, useUpdate } from 'ahooks';
import ajax from "@/services";
import { TableModule } from "@/components";
// import "./index.scss";
import { TableModule ,FormInput} from "@/components";
import { useNavigate, useLocation } from "react-router-dom"
import { useSelector, useDispatch } from "react-redux"
import { setTabList} from "@/store/common.js"
import "./index.scss";
// import errorImg from "@/assets/images/layout/error.png"
// import { useLocation } from "react-router-dom";
const { TextArea } = Input;
function TimeRule() {
const navigate = useNavigate()
const dispatch = useDispatch()
const columns = [
// {
// title: "序号",
// dataIndex: "index",
// key: "index",
// align:"center",
// render: (_, record, index) => {
// return index + 1;
// },
// },
// {
// title: "商户名称",
// dataIndex: "merchantName",
// align: "center",
// render: (text, record, index) => (
// <div style={{ width: "100px", wordBreak: "break-all" }}>{record.merchantName}</div>
// )
// },
// {
// title: "操作人",
// dataIndex: "operator",
// key: "operator",
// align: "center",
// },
// {
// title: "车牌号",
// dataIndex: "licensePlateNumber",
// align: "center",
// render: (text, record, index) => (
// <div style={{ width: "100px", wordBreak: "break-all" }}>{record.licensePlateNumber}</div>
// )
// },
// {
// title: "路段",
// dataIndex: "section",
// key: "section",
// align: "center",
// },
// {
// title: "泊位号",
// dataIndex: "parkingSpotNumber",
// key: "parkingSpotNumber",
// align: "center",
// },
// {
// title: "出入场类型",
// dataIndex: "entryExitType",
// align: "center",
// key: "entryExitType",
// },
// {
// title: "出入场时间",
// dataIndex: "entryExitTime",
// align: "center",
// render: (text, record, index) => (
// <div style={{ width: "130px", wordBreak: "break-all" }}>{record.entryExitTime}</div>
// )
// },
// {
// title: "操作时间",
// dataIndex: "operationTime",
// align: "center",
// render: (text, record, index) => (
// <div style={{ width: "130px", wordBreak: "break-all" }}>{record.operationTime}</div>
// )
// },
// {
// title: "间隔时长",
// dataIndex: "intervalDuration",
// key: "intervalDuration",
// align: "center",
// },
];
{
title: "名称",
dataIndex: "name",
align: "center",
},
{
title: "备注",
dataIndex: "remarks",
align: "center",
},
{
title: "操作",
align: "center",
render: (text, record) => {
return (
<>
<Popover
content={
<div className="operateBtn">
<div
onClick={() => {
let sessionStorageData= JSON.parse(sessionStorage.getItem('tabList'))
let sameMenu = sessionStorageData.filter(item => { return item.path.indexOf("/offPeak/managementTime")>-1})
if(sameMenu.length==0){
sessionStorageData.push({text: "管理时间", name: "managementTime", icon: "", path: `/offPeak/managementTime?&id=${record.id}`})
sessionStorage.setItem("tabList",JSON.stringify(sessionStorageData))
dispatch(setTabList(sessionStorageData))
navigate(`/offPeak/managementTime?&id=${record.id}`)
}else{
navigate(`/offPeak/managementTime?&id=${record.id}`)
}
}}
>
管理时间
</div>
<div
onClick={() => {
setActionState("edit");
setVisible(true);
setEditId(record.id)
setRowData({
...rowData,
name: record.name,
remarks: record.remarks,
})
}}
>
编辑
</div>
<div
onClick={() => {
handleDel(record);
}}
>
删除
</div>
</div>
}
>
<Button type="primary">操作</Button>
</Popover>
</>
);
},
},
];
const listData={
name: "",
remarks: ""
}
const formSearch = [
// {
// type: "Select",
// label: "商户名称",
// name: "merchantName",
// placeholder:"请选择商户名称"
// },
// {
// type: "Input",
// label: "路段",
// placeholder: "请输入路段",
// name: "road_name",
// },
// {
// type: "Input",
// label: "泊位号",
// placeholder: "请输入泊位号",
// name: "parking_num",
// },
// {
// type: "Input",
// label: "操作人",
// placeholder: "请输入操作人",
// name: "operator",
// },
// {
// type: "Input",
// label: "间隔时长大于分钟数",
// placeholder: "请输入内容",
// name: "exceedTime",
// },
// {
// type: "RangePicker",
// label: "操作时间",
// name: "operationTime",
// },
{
type: "Input",
label: "规则名称",
autoComplete:"off",
placeholder: "请输入规则名称",
name: "name",
},
];
// 弹窗标题
const getModalTitle = (key) => {
switch (key) {
case "edit":
return "修改时间详情";
case "add":
return "添加时间详情";
default:
break;
}
};
//搜索参数初始化
const initFormData = {
merchantName: "0",
road_name: "",
parking_num: "",
operator: "",
exceedTime: "",
name: "",
};
const tableRef = useRef(null);
const [actionState, setActionState] = useState(null); //操作状态
//搜索的结果
const [tableData, setTableData] = useState([]);
//搜索的总结果数
const [total, setTotal] = useState(0);
const [visible, setVisible] = useState(false);
// 新增数据
const [rowData, setRowData] = useState(listData);
//储存编辑的id
const [editId,setEditId] = useState("");
function search(params) {
// ajax.getPDAList(params).then((res) => {
// if (res.status === 20000) {
// setTableData(res.data.list);
// setTotal(res.data.total);
// }
// });
ajax.getTimeRuleList(params).then((res) => {
if (res.status === 20000) {
setTableData(res.data.list);
setTotal(res.data.total);
}
});
}
function addButton() {
return (
<Button
type="primary"
onClick={() => {
setActionState("add");
setVisible(true);
}}
>
添加
</Button>
);
}
//删除
const handleDel = (record) => {
Modal.confirm({
title: `提示`,
content: `是否确认删除选中的数据项？`,
onOk: () => {
ajax.delTimeRule({id:record.id}).then((res) => {
if (res.status === 20000) {
message.success('删除成功')
tableRef.current.fetch(1,{})
}else {
message.error(res?.message);
}
});
}
})
}
// 取消
const onCancel = () => {
setActionState(null);
setVisible(false);
};
// 确定
const handleOk = () => {
if(!rowData.name){
message.destroy();
message.warning(`名称不可为空`);
return
}
let data = rowData
if(actionState=="edit"){
data={...rowData,id:editId}
addAjax(data,'修改成功')
}else{
addAjax(data,'新增成功')
}
}
//新增修改函数
const addAjax = (data,messageDate) => {
ajax.getTimeRuleAdd(data).then((res) => {
if (res.status === 20000) {
setVisible(false);
message.success(messageDate)
setRowData(listData)
tableRef.current.fetch(1,{})
}else {
message.error(res?.message);
}
});
}
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/bpm/record/get_pda_export"
/>
<>
<TableModule
ref={tableRef}
columns={columns}
tableData={tableData}
formSearch={formSearch}
search={search}
total={total}
initFormData={initFormData}
rightButtonGroup={[addButton()]}
isExport={false}
/>
<Modal
open={visible}
width={720}
onCancel={onCancel}
onOk={handleOk}
className="modal-rule-detail"
destroyOnClose
title={getModalTitle(actionState)}
afterClose={()=>{
setRowData({
name: "",
remarks: ""
})
}}
>
<div className="form-container">
<FormInput
isRequired={true}
yisaLabel="名称"
placeholder="请输入规则名称"
value={rowData.name}
showClose={true}
onChange={e => { setRowData({ ...rowData, name: e.target.value }) }}
/>
<div className="yisa-search">
<label className="line">备注</label>
<TextArea
showCount
placeholder="请输入"
maxLength={150}
value={rowData.remarks || ""}
style={{ height: 120}}
onChange={e => { setRowData({ ...rowData, remarks: e.target.value }) }}
/>
</div>
</div>
</Modal>
</>
);
}

4
src/pages/OffPeak/OffPeakTimeMgm/index.jsx
View File

@ -1,6 +1,8 @@
import RuleDetail from "./RuleDetail"
import TimeRule from "./TimeRule"
import ManagementTime from "./ManagementTime"
export default {
RuleDetail,
TimeRule
TimeRule,
ManagementTime
}

8
src/router/router.config.js
View File

@ -1316,6 +1316,12 @@ let routes = [
name: "timeRule",
component: pages.TimeRule,
},
{
path: "/offPeak/managementTime",
text: "时间规则",
name: "timeRule",
component: pages.ManagementTime,
},
// -------------------------------新能源充电系统
{
path: "/newEnergy/newEnergyOverview",
@ -1377,7 +1383,7 @@ let routes = [
text: "电桩监控",
name: "pileMonitor",
component: pages.PileMonitor,
},
}
],
},
];

96
src/services/OffPeak/index.js
View File

@ -69,7 +69,86 @@ const getParkList = () => {
type: 'get'
})
}
//时间规则详情列表
const getTimeRuleDetailsList = (params) => {
return ajax({
url: "/api/off_peak/rule_manage/time_rule_details_list",
type: "get",
data: params,
});
}
//添加时间规则详情
const getTimeRuleDetailsAdd = (params) => {
return ajax({
url: "/api/off_peak/rule_manage/save_time_rule_details",
type: "post",
data: params,
});
}
//删除时间规则详情
const delTimeRuleDetails = (params) => {
return ajax({
url: "/api/off_peak/rule_manage/del_time_rule_details",
type: "get",
data: params,
});
}
//时间规则列表
const getTimeRuleList = (params) => {
return ajax({
url: "/api/off_peak/rule_manage/time_rule_list",
type: "get",
data: params,
});
}
//添加时间规则详情
const getTimeRuleAdd = (params) => {
return ajax({
url: "/api/off_peak/rule_manage/save_time_rule",
type: "post",
data: params,
});
}
//删除时间规则详情
const delTimeRule = (params) => {
return ajax({
url: "/api/off_peak/rule_manage/del_time_rule",
type: "get",
data: params,
});
}
//获取规则关联列表
const getRuleLinkList = (params) => {
return ajax({
url: "/api/off_peak/rule_manage/get_rule_link_list",
type: "get",
data: params,
});
}
//获取时间规则详情下拉
const getRuleDetailsSelect = (params) => {
return ajax({
url: "/api/off_peak/rule_manage/get_rule_details_select",
type: "get",
data: params,
});
}
//获取时间规则详情下拉
const getRuleLinkAdd = (params) => {
return ajax({
url: "/api/off_peak/rule_manage/add_rule_link",
type: "POST",
data: params,
});
}
//删除规则关联
const getDelRuleLink = (params) => {
return ajax({
url: "/api/off_peak/rule_manage/del_rule_link",
type: "POST",
data: params,
});
}
export default {
getBookInfoList,
getStallCountData,
@ -80,5 +159,16 @@ export default {
getBookInfoList,
getBreakInfoList,
getOffPeakRecords,
getParkList
}
getParkList,
getTimeRuleDetailsList,
getTimeRuleDetailsAdd,
delTimeRuleDetails,
getTimeRuleAdd,
delTimeRule,
getTimeRuleList,
getRuleLinkList,
getRuleDetailsSelect,
getRuleLinkAdd,
getDelRuleLink
}
Write Preview
Loading…
Cancel
Save