From c5fd89cb2c2293f72d74c81e50ff465fe921f609 Mon Sep 17 00:00:00 2001 From: He Huan Date: Mon, 15 Jan 2024 18:13:28 +0800 Subject: [PATCH] =?UTF-8?q?feat():=20=E6=96=B0=E5=A2=9E=E9=94=99=E6=97=B6?= =?UTF-8?q?=E6=97=B6=E9=97=B4=E7=AE=A1=E7=90=86=E8=A7=84=E5=88=99=E8=AF=A6?= =?UTF-8?q?=E6=83=85=E5=92=8C=E6=97=B6=E9=97=B4=E8=A7=84=E5=88=99=E9=A1=B5?= =?UTF-8?q?=E9=9D=A2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/TableModule/index.jsx | 4 +- src/components/layout/Tabs/index.jsx | 2 +- .../OffPeakTimeMgm/ManagementTime/index.jsx | 6 + .../OffPeakTimeMgm/ManagementTime/index.scss | 15 + .../OffPeakTimeMgm/ManagementTime/loadable.jsx | 262 +++++++++++ .../OffPeak/OffPeakTimeMgm/RuleDetail/index.scss | 58 +++ .../OffPeak/OffPeakTimeMgm/RuleDetail/loadable.jsx | 514 +++++++++++++++------ .../OffPeak/OffPeakTimeMgm/TimeRule/index.scss | 33 ++ .../OffPeak/OffPeakTimeMgm/TimeRule/loadable.jsx | 361 +++++++++------ src/pages/OffPeak/OffPeakTimeMgm/index.jsx | 4 +- src/router/router.config.js | 8 +- src/services/OffPeak/index.js | 96 +++- 12 files changed, 1082 insertions(+), 281 deletions(-) create mode 100644 src/pages/OffPeak/OffPeakTimeMgm/ManagementTime/index.jsx create mode 100644 src/pages/OffPeak/OffPeakTimeMgm/ManagementTime/index.scss create mode 100644 src/pages/OffPeak/OffPeakTimeMgm/ManagementTime/loadable.jsx 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 ? ( - + //autoComplete输入框是否显示自动填充 ) : ( - + )} ); 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 )} > -
+
-1 ? 'active' : ''}`}> { handleClick(item) }}>{item.text} { handleClose(item, index) }}>
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) => } /> \ 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) => ( +
{record.is_in==1?"是":"否"}
+ ) + }, + { + title: "是否可出场", + dataIndex: "is_out", + align: "center", + key: "is_out", + render: (text, record, index) => ( +
{record.is_out==1?"是":"否"}
+ ) + }, + { + title: "备注", + dataIndex: "remarks", + align: "center", + key:"remarks", + }, + { + title: "操作", + align: "center", + render: (text, record) => { + return ( + <> + + {/* */} + + ); + }, + }, + ]; + 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 ([,] + + ); + } + // 确定 + 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 ( + <> + { + console.log(selectedRowKeys, selectedRows); + setTableSelectCheck(selectedRowKeys) + }, + type: "checkbox" + }} + isExport={false} + /> + { + setRowData({ + ids: [] + }) + }} + > +
+ { setRowData({ ids: e }) }} + /> +
+ + + ); +} + +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) => ( - //
{record.merchantName}
- // ) - // }, - // { - // title: "操作人", - // dataIndex: "operator", - // key: "operator", - // align: "center", - // }, - // { - // title: "车牌号", - // dataIndex: "licensePlateNumber", - // align: "center", - // render: (text, record, index) => ( - //
{record.licensePlateNumber}
- // ) - // }, - // { - // 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) => ( - //
{record.entryExitTime}
- // ) - // }, - // { - // title: "操作时间", - // dataIndex: "operationTime", - // align: "center", - // render: (text, record, index) => ( - //
{record.operationTime}
- // ) - // }, - // { - // 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) => ( +
{record.is_in==1?"是":"否"}
+ ) + }, + { + title: "是否可出场", + dataIndex: "is_out", + align: "center", + key: "is_out", + render: (text, record, index) => ( +
{record.is_out==1?"是":"否"}
+ ) + }, + { + title: "备注", + dataIndex: "remarks", + align: "center", + }, + { + title: "操作", + align: "center", + render: (text, record) => { + return ( + <> + +
{ + 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, + }) + }} + > + 编辑 +
+
{ + handleDel(record); + }} + > + 删除 +
+
+ } + > + + + + ); + }, + }, ]; - 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 ( + + ); + } + // 确定 + 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 ( - + <> + + { + setRowData({ + name: "", + date_type:"", + start_time: '00:00:00', + end_time: '23:59:59', + is_in: "", + is_out: "", + remarks: "", + }) + }} + > +
+ { setRowData({ ...rowData, name: e.target.value }) }} + /> + { setRowData({ ...rowData,date_type: e }) }} + /> +
+
+
*
+ +
+ {setRowData({ ...rowData,start_time: timeString })}} + /> +
+
+
+
*
+ +
+ {setRowData({ ...rowData,end_time: timeString })}} + /> +
+ { setRowData({ ...rowData,is_in: e }) }} + /> + { setRowData({ ...rowData, is_out: e }) }} + /> +
+ +