diff --git a/src/components/TableModule/index.jsx b/src/components/TableModule/index.jsx
index 7bf076f..478752e 100644
--- a/src/components/TableModule/index.jsx
+++ b/src/components/TableModule/index.jsx
@@ -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>
);
diff --git a/src/components/layout/Tabs/index.jsx b/src/components/layout/Tabs/index.jsx
index 22cd89b..db7c0b9 100644
--- a/src/components/layout/Tabs/index.jsx
+++ b/src/components/layout/Tabs/index.jsx
@@ -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>
diff --git a/src/pages/OffPeak/OffPeakTimeMgm/ManagementTime/index.jsx b/src/pages/OffPeak/OffPeakTimeMgm/ManagementTime/index.jsx
new file mode 100644
index 0000000..c45021e
--- /dev/null
+++ b/src/pages/OffPeak/OffPeakTimeMgm/ManagementTime/index.jsx
@@ -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 />} />
\ No newline at end of file
diff --git a/src/pages/OffPeak/OffPeakTimeMgm/ManagementTime/index.scss b/src/pages/OffPeak/OffPeakTimeMgm/ManagementTime/index.scss
new file mode 100644
index 0000000..12494ce
--- /dev/null
+++ b/src/pages/OffPeak/OffPeakTimeMgm/ManagementTime/index.scss
@@ -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;
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/pages/OffPeak/OffPeakTimeMgm/ManagementTime/loadable.jsx b/src/pages/OffPeak/OffPeakTimeMgm/ManagementTime/loadable.jsx
new file mode 100644
index 0000000..c0510ea
--- /dev/null
+++ b/src/pages/OffPeak/OffPeakTimeMgm/ManagementTime/loadable.jsx
@@ -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;
diff --git a/src/pages/OffPeak/OffPeakTimeMgm/RuleDetail/index.scss b/src/pages/OffPeak/OffPeakTimeMgm/RuleDetail/index.scss
index e69de29..da7212c 100644
--- a/src/pages/OffPeak/OffPeakTimeMgm/RuleDetail/index.scss
+++ b/src/pages/OffPeak/OffPeakTimeMgm/RuleDetail/index.scss
@@ -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;
+ }
+}
\ No newline at end of file
diff --git a/src/pages/OffPeak/OffPeakTimeMgm/RuleDetail/loadable.jsx b/src/pages/OffPeak/OffPeakTimeMgm/RuleDetail/loadable.jsx
index f2a3d5f..860785b 100644
--- a/src/pages/OffPeak/OffPeakTimeMgm/RuleDetail/loadable.jsx
+++ b/src/pages/OffPeak/OffPeakTimeMgm/RuleDetail/loadable.jsx
@@ -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>
+ </>
);
}
diff --git a/src/pages/OffPeak/OffPeakTimeMgm/TimeRule/index.scss b/src/pages/OffPeak/OffPeakTimeMgm/TimeRule/index.scss
index e69de29..68769c5 100644
--- a/src/pages/OffPeak/OffPeakTimeMgm/TimeRule/index.scss
+++ b/src/pages/OffPeak/OffPeakTimeMgm/TimeRule/index.scss
@@ -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;
+ }
+}
\ No newline at end of file
diff --git a/src/pages/OffPeak/OffPeakTimeMgm/TimeRule/loadable.jsx b/src/pages/OffPeak/OffPeakTimeMgm/TimeRule/loadable.jsx
index 4e9f808..9287f59 100644
--- a/src/pages/OffPeak/OffPeakTimeMgm/TimeRule/loadable.jsx
+++ b/src/pages/OffPeak/OffPeakTimeMgm/TimeRule/loadable.jsx
@@ -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>
+ </>
);
}
diff --git a/src/pages/OffPeak/OffPeakTimeMgm/index.jsx b/src/pages/OffPeak/OffPeakTimeMgm/index.jsx
index 08d94ea..ddfc8ca 100644
--- a/src/pages/OffPeak/OffPeakTimeMgm/index.jsx
+++ b/src/pages/OffPeak/OffPeakTimeMgm/index.jsx
@@ -1,6 +1,8 @@
import RuleDetail from "./RuleDetail"
import TimeRule from "./TimeRule"
+import ManagementTime from "./ManagementTime"
export default {
RuleDetail,
- TimeRule
+ TimeRule,
+ ManagementTime
}
\ No newline at end of file
diff --git a/src/router/router.config.js b/src/router/router.config.js
index 1c5c6fe..89c54a9 100644
--- a/src/router/router.config.js
+++ b/src/router/router.config.js
@@ -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,
- },
+ }
],
},
];
diff --git a/src/services/OffPeak/index.js b/src/services/OffPeak/index.js
index abb481d..9efd468 100644
--- a/src/services/OffPeak/index.js
+++ b/src/services/OffPeak/index.js
@@ -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
-}
\ No newline at end of file
+ getParkList,
+ getTimeRuleDetailsList,
+ getTimeRuleDetailsAdd,
+ delTimeRuleDetails,
+ getTimeRuleAdd,
+ delTimeRule,
+ getTimeRuleList,
+ getRuleLinkList,
+ getRuleDetailsSelect,
+ getRuleLinkAdd,
+ getDelRuleLink
+
+}