17 changed files with 1860 additions and 466 deletions
-
26src/pages/InRoadMgm/BusinessMgm/ChargeRules/EditModal.jsx
-
31src/pages/InRoadMgm/BusinessMgm/ChargeRules/FormModal.jsx
-
16src/pages/InRoadMgm/BusinessMgm/ChargeRules/index.scss
-
9src/pages/InRoadMgm/PersonMgm/Performance/SalesStat/index.scss
-
30src/pages/InRoadMgm/PersonMgm/Performance/SalesStat/loadable.jsx
-
6src/pages/InRoadMgm/PersonMgm/Performance/WorkerStat/loadable.jsx
-
1src/pages/OperationCenter/CustomerServieMgm/CallbackSuggestion/index.scss
-
47src/pages/OperationCenter/CustomerServieMgm/CallbackSuggestion/loadable.jsx
-
343src/pages/OperationCenter/CustomerServieMgm/ComplainManage/index.scss
-
524src/pages/OperationCenter/CustomerServieMgm/ComplainManage/loadable.jsx
-
104src/pages/OperationCenter/OtherBusiness/Staggered/StaggeredOrder/index.scss
-
374src/pages/OperationCenter/OtherBusiness/Staggered/StaggeredOrder/loadable.jsx
-
287src/pages/OperationCenter/OtherBusiness/Staggered/StaggeredStat/index.scss
-
251src/pages/OperationCenter/OtherBusiness/Staggered/StaggeredStat/loadable.jsx
-
18src/router/menu.js
-
13src/services/OperationCenter/CustomerManage/index.js
-
20src/services/OperationCenter/StaggeredMgm/index.js
@ -1,15 +1,517 @@ |
|||||
import React, { useState, useRef, useEffect } from "react"; |
import React, { useState, useRef, useEffect } from "react"; |
||||
// import { message, Pagination, Table, Space, Modal, } from "antd"; |
|
||||
// import { dictionary, utils } from "@/config/common"; |
|
||||
// import moment from 'moment' |
|
||||
// import { useSessionStorageState, useUpdateEffect, useSize, useUpdate } from 'ahooks'; |
|
||||
// import ajax from "@/services" |
|
||||
// import { FormInput, FormSelect, OptionPanel, ResultPanel, FormSliderPicker, AreaCascader, ImgResize, ImgZoom, } from "@/components" |
|
||||
// import "./index.scss"; |
|
||||
// import errorImg from "@/assets/images/layout/error.png" |
|
||||
// import { useLocation } from "react-router-dom"; |
|
||||
function ComplainManage() { |
|
||||
return <div>ComplainManage</div> |
|
||||
|
import { ResultFlowResult } from "@/components" |
||||
|
import { Select, Input, Button, Table, message, TreeSelect, Pagination, DatePicker, Cascader, Popover, Modal } from 'antd' |
||||
|
import { |
||||
|
pageSizeOptions |
||||
|
} from '@/config/character.config.js' |
||||
|
import "./index.scss"; |
||||
|
import { SearchOutlined, DeleteOutlined } from '@ant-design/icons'; |
||||
|
import ajax from '@/services' |
||||
|
import { useSessionStorageState } from "ahooks" |
||||
|
import { useNavigate, useLocation } from "react-router-dom" |
||||
|
const { RangePicker } = DatePicker; |
||||
|
function ComplainManage(props) { |
||||
|
// const configData = props.sysConfig["lib-deploy"] || {}; |
||||
|
const [ajaxLoading, setAjaxLoading] = useState(false) |
||||
|
const location = useLocation() |
||||
|
|
||||
|
const [resultData, setResultData] = useState({ |
||||
|
data: [], |
||||
|
total_records: 0, |
||||
|
export_url: '', |
||||
|
process_url: "" |
||||
|
}) |
||||
|
const parameter = { |
||||
|
order_num: '',//工单编号 |
||||
|
source: '',//来源 |
||||
|
order_type: '',//工单类型 |
||||
|
person: '',//联系人 |
||||
|
phone: '',//联系电话 |
||||
|
founder: '',//创建人 |
||||
|
serial_number: '',//渠道流水号 |
||||
|
pn: 1, |
||||
|
page_size: Number(pageSizeOptions[0]), // 每页条数 |
||||
|
} |
||||
|
const [formData, setFormData] = useState(parameter) |
||||
|
const [lastFormData, setLastFormData] = useState(formData) |
||||
|
const lastFormDataRef = useRef(formData) |
||||
|
const [editVisible, setEditVisible] = useState(false) |
||||
|
//工单编号 |
||||
|
const handlePartName = (value) => { |
||||
|
setFormData({ ...formData, order_num: value.target.value }) |
||||
|
} |
||||
|
//来源 |
||||
|
const handleMethod = (v) => { |
||||
|
setFormData({ ...formData, source: v }) |
||||
|
} |
||||
|
//工单类型 |
||||
|
const handleOrderType = (v) => { |
||||
|
setFormData({ ...formData, order_type: v }) |
||||
|
} |
||||
|
//联系人 |
||||
|
const handlePerson = (v) => { |
||||
|
setFormData({ ...formData, person: v.target.value }) |
||||
|
} |
||||
|
//联系电话 |
||||
|
const handlePhone = (v) => { |
||||
|
setFormData({ ...formData, phone: v.target.value }) |
||||
|
} |
||||
|
//创建人 |
||||
|
const handleFounder = (v) => { |
||||
|
setFormData({ ...formData, founder: v.target.value }) |
||||
|
} |
||||
|
//订购时间 |
||||
|
const onChangeTime = (value, dateString) => { |
||||
|
setFormData({ |
||||
|
...formData, |
||||
|
start_time: dateString[0], |
||||
|
end_time: dateString[1] |
||||
|
}) |
||||
|
} |
||||
|
//商户名称 |
||||
|
const handleSerial = (value) => { |
||||
|
setFormData({ ...formData, serial_number: value.target.value }) |
||||
|
} |
||||
|
|
||||
|
//导出 |
||||
|
const exportData = () => { |
||||
|
let data = { |
||||
|
...formData |
||||
|
} |
||||
|
ajax.getExportOrder(data).then(res => { |
||||
|
window.open(res.data.url) |
||||
|
}) |
||||
|
} |
||||
|
//列表 |
||||
|
const handleColumns = (tab) => { |
||||
|
let result = [...deployListColumns]; |
||||
|
return result; |
||||
|
} |
||||
|
//列表 |
||||
|
const deployListColumns = [ |
||||
|
{ |
||||
|
title: '序号', |
||||
|
render: (_, record, index) => { |
||||
|
return index + 1 |
||||
|
} |
||||
|
}, |
||||
|
{ |
||||
|
title: '工单编号', |
||||
|
dataIndex: 'order_num', |
||||
|
key: 'order_num', |
||||
|
}, |
||||
|
{ |
||||
|
title: '来源', |
||||
|
dataIndex: 'source', |
||||
|
key: 'source', |
||||
|
}, |
||||
|
{ |
||||
|
title: '联系人', |
||||
|
dataIndex: 'person', |
||||
|
key: 'person', |
||||
|
}, |
||||
|
{ |
||||
|
title: '联系电话', |
||||
|
dataIndex: 'phone', |
||||
|
key: 'phone', |
||||
|
}, |
||||
|
{ |
||||
|
title: '工单类型', |
||||
|
dataIndex: 'order_type', |
||||
|
key: 'order_type', |
||||
|
}, |
||||
|
{ |
||||
|
title: '派单时间', |
||||
|
dataIndex: 'send_time', |
||||
|
key: 'send_time', |
||||
|
}, |
||||
|
{ |
||||
|
title: '截止时间', |
||||
|
dataIndex: 'end_time', |
||||
|
key: 'end_time', |
||||
|
}, |
||||
|
{ |
||||
|
title: '创建人', |
||||
|
dataIndex: 'founder', |
||||
|
key: 'founder', |
||||
|
}, |
||||
|
{ |
||||
|
title: '状态', |
||||
|
dataIndex: 'status', |
||||
|
key: 'status', |
||||
|
}, |
||||
|
{ |
||||
|
title: '操作', |
||||
|
render: (text, record) => { |
||||
|
return <> |
||||
|
<Popover content={ |
||||
|
<div className="operateBtn"> |
||||
|
<div onClick={() => { CheckBtn(record) }}>查看</div> |
||||
|
</div>}> |
||||
|
<button className="scheduleBtn colorBtn">操作</button> |
||||
|
</Popover> |
||||
|
</> |
||||
|
}, |
||||
|
}] |
||||
|
//查看弹窗 |
||||
|
const [getRecordData, setGetRecordData] = useState([]) |
||||
|
const CheckBtn = (record) => { |
||||
|
setGetRecordData(Object.assign({}, getRecordData, { |
||||
|
road_name: record.road_name, |
||||
|
phone: record.phone, |
||||
|
plate: record.plate, |
||||
|
status: record.status, |
||||
|
method: record.method, |
||||
|
order_amount: record.order_amount, |
||||
|
phone: record.phone, |
||||
|
phone: record.phone, |
||||
|
})) |
||||
|
setEditVisible(true) |
||||
|
} |
||||
|
const editModal = () => { |
||||
|
setEditVisible(false) |
||||
|
} |
||||
|
//重置数据 |
||||
|
const getResetData = () => { |
||||
|
setFormData({ |
||||
|
...parameter |
||||
|
}) |
||||
|
getData({ ...parameter }) |
||||
|
} |
||||
|
// 获取列表数据 |
||||
|
const getData = (data = formData) => { |
||||
|
setAjaxLoading(true) |
||||
|
ajax.getComplainList(data).then(res => { |
||||
|
setAjaxLoading(false) |
||||
|
if (res.status === 20000) { |
||||
|
let resDataArr = res.data.list.map((item) => { |
||||
|
item.key = item.id |
||||
|
return item |
||||
|
}) |
||||
|
setResultData({ |
||||
|
...resultData, |
||||
|
data: resDataArr, |
||||
|
total_records: res.data.total |
||||
|
}) |
||||
|
} else { |
||||
|
setResultData({ |
||||
|
data: [], |
||||
|
total_records: 0, |
||||
|
export_url: '', |
||||
|
process_url: "" |
||||
|
}) |
||||
|
message.error(res.message) |
||||
|
} |
||||
|
}, err => { |
||||
|
console.log(err) |
||||
|
}) |
||||
|
} |
||||
|
//切换分页 |
||||
|
const changePn = (pn, length) => { |
||||
|
if (lastFormData.page_size === length) { |
||||
|
setLastFormData(Object.assign({}, lastFormData, { pn: pn })) |
||||
|
lastFormDataRef.current = Object.assign({}, lastFormData, { pn: pn }) |
||||
|
getData(Object.assign({}, lastFormData, { pn: pn })) |
||||
|
} |
||||
|
} |
||||
|
//切换每页条数 |
||||
|
const changeLength = (pn, length) => { |
||||
|
setFormData(Object.assign({}, formData, { pn: 1, page_size: length })) |
||||
|
setLastFormData(Object.assign({}, lastFormData, { pn: 1, page_size: length })) |
||||
|
lastFormDataRef.current = Object.assign({}, lastFormData, { pn: 1, page_size: length }) |
||||
|
getData(Object.assign({}, lastFormData, { pn: 1, page_size: length })) |
||||
|
} |
||||
|
//检索数据 |
||||
|
const getSearchData = (data = formData) => { |
||||
|
getData(data) |
||||
|
} |
||||
|
const placeBtn = () => { |
||||
|
setEditVisible(false) |
||||
|
} |
||||
|
const [sessionTabList, setSessionTabList] = useSessionStorageState('ComplainManage', { |
||||
|
value: { |
||||
|
} |
||||
|
}) |
||||
|
useEffect(() => { |
||||
|
console.log(location) |
||||
|
if (sessionTabList && Object.values(sessionTabList).length > 0) { |
||||
|
setFormData({ |
||||
|
road: sessionTabList?.road, |
||||
|
phone: sessionTabList?.phone, |
||||
|
plate: sessionTabList?.plate, |
||||
|
method: sessionTabList?.method, |
||||
|
start_time: sessionTabList?.start_time, |
||||
|
end_time: sessionTabList?.end_time, |
||||
|
serial_number: sessionTabList?.serial_number, |
||||
|
}) |
||||
|
} |
||||
|
}, []) |
||||
|
useEffect(() => { |
||||
|
setSessionTabList({ |
||||
|
...formData |
||||
|
}) |
||||
|
}, [formData]) |
||||
|
useEffect(() => { |
||||
|
getData() |
||||
|
}, []) |
||||
|
return <> |
||||
|
<div className="paid-ComplainManage"> |
||||
|
<div className="paid-search"> |
||||
|
<label className="search">查询条件</label> |
||||
|
<div className="yisa-search"> |
||||
|
<label>工单编号</label> |
||||
|
<Input |
||||
|
placeholder="请输入工单编号" |
||||
|
value={formData.order_num} |
||||
|
style={{ width: 255 }} |
||||
|
onChange={handlePartName} |
||||
|
/> |
||||
|
</div> |
||||
|
<div className="yisa-search"> |
||||
|
<label>来源</label> |
||||
|
<Select |
||||
|
style={{ width: 255, marginLeft: 14 }} |
||||
|
value={formData.source} |
||||
|
options={sysConfig.souceType} |
||||
|
onChange={handleMethod} |
||||
|
/> |
||||
|
</div> |
||||
|
<div className="yisa-search"> |
||||
|
<label>工单类型</label> |
||||
|
<Select |
||||
|
style={{ width: 255, marginLeft: 14 }} |
||||
|
value={formData.order_type} |
||||
|
options={[ |
||||
|
{ |
||||
|
value: 1, |
||||
|
label: "投诉" |
||||
|
}, |
||||
|
{ |
||||
|
value: 2, |
||||
|
label: "咨询" |
||||
|
}, |
||||
|
{ |
||||
|
value: 3, |
||||
|
label: "建议" |
||||
|
} |
||||
|
]} |
||||
|
onChange={handleOrderType} |
||||
|
/> |
||||
|
</div> |
||||
|
<div className="yisa-search"> |
||||
|
<label>联系人</label> |
||||
|
<Input |
||||
|
placeholder="请输入联系人" |
||||
|
value={formData.person} |
||||
|
style={{ width: 255, marginLeft: 28 }} |
||||
|
onChange={handlePerson} |
||||
|
/> |
||||
|
</div> |
||||
|
<div className="yisa-search"> |
||||
|
<label>联系电话</label> |
||||
|
<Input |
||||
|
placeholder="请输入联系电话" |
||||
|
value={formData.phone} |
||||
|
style={{ width: 255, marginLeft: 28 }} |
||||
|
onChange={handlePhone} |
||||
|
/> |
||||
|
</div> |
||||
|
<div className="yisa-search"> |
||||
|
<label>创建人</label> |
||||
|
<Input |
||||
|
placeholder="请输入创建人" |
||||
|
value={formData.founder} |
||||
|
style={{ width: 255, marginLeft: 28 }} |
||||
|
onChange={handleFounder} |
||||
|
/> |
||||
|
</div> |
||||
|
<div className="yisa-search"> |
||||
|
<label>工单类型</label> |
||||
|
<Select |
||||
|
style={{ width: 255, marginLeft: 14 }} |
||||
|
value={formData.order_type} |
||||
|
options={[ |
||||
|
{ |
||||
|
value: 1, |
||||
|
label: "跟进中" |
||||
|
}, |
||||
|
{ |
||||
|
value: 2, |
||||
|
label: "未处理" |
||||
|
} |
||||
|
]} |
||||
|
onChange={handleOrderType} |
||||
|
/> |
||||
|
</div> |
||||
|
<div className="yisa-search"> |
||||
|
<label>支付方式</label> |
||||
|
<Select |
||||
|
style={{ width: 255, marginLeft: 14 }} |
||||
|
value={formData.method} |
||||
|
options={sysConfig.StaggeredPay} |
||||
|
onChange={handleMethod} |
||||
|
/> |
||||
|
</div> |
||||
|
<div className="yisa-search"> |
||||
|
<label>订购时间</label> |
||||
|
<RangePicker |
||||
|
style={{ width: 255, marginLeft: 14 }} |
||||
|
showTime={{ |
||||
|
format: 'HH:mm:ss', |
||||
|
}} |
||||
|
format="YYYY-MM-DD HH:mm:ss" |
||||
|
onChange={onChangeTime} |
||||
|
/> |
||||
|
</div> |
||||
|
<div className="yisa-search"> |
||||
|
<label>渠道流水号</label> |
||||
|
<Input |
||||
|
placeholder="请输入" |
||||
|
value={formData.serial_number} |
||||
|
style={{ width: 255 }} |
||||
|
onChange={handleSerial} |
||||
|
/> |
||||
|
</div> |
||||
|
<div className="timePicker yisa-search"> |
||||
|
<div className="btnBox"> |
||||
|
<Button type="primary" className="yisa-btn colorBtn" icon={<SearchOutlined />} onClick={() => { getSearchData() }}> |
||||
|
搜索 |
||||
|
</Button> |
||||
|
<Button type="primary" className="yisa-btn colorReset" icon={<DeleteOutlined />} onClick={() => { getResetData() }}> |
||||
|
清空 |
||||
|
</Button> |
||||
|
<Button type="primary" className="yisa-btn colorBtn" onClick={() => { exportData() }}> |
||||
|
导出 |
||||
|
</Button> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div className="paid-result"> |
||||
|
<div className="result"> |
||||
|
<span className="font">共检索到<em>{resultData.total_records}</em>条结果</span> |
||||
|
<ResultFlowResult ajaxLoad={ajaxLoading} resultData={resultData.data ? resultData.data : []}> |
||||
|
<Table |
||||
|
bordered |
||||
|
// className='yisa-table' |
||||
|
dataSource={resultData.data} |
||||
|
columns={ |
||||
|
handleColumns() |
||||
|
} |
||||
|
pagination={false} |
||||
|
loading={ajaxLoading} |
||||
|
/> |
||||
|
<Pagination |
||||
|
className="pagination-common" |
||||
|
showSizeChanger |
||||
|
showQuickJumper |
||||
|
showTotal={() => `共 ${resultData.total_records} 条`} |
||||
|
total={resultData.total_records} |
||||
|
current={lastFormData.pn} |
||||
|
pageSize={lastFormData.page_size} |
||||
|
pageSizeOptions={pageSizeOptions} |
||||
|
onChange={changePn} |
||||
|
onShowSizeChange={changeLength} |
||||
|
/> |
||||
|
</ResultFlowResult> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
</div> |
||||
|
<Modal |
||||
|
visible={editVisible} |
||||
|
onCancel={editModal} |
||||
|
footer={null} |
||||
|
className="check-detail" |
||||
|
> |
||||
|
<div className="carTitle"> |
||||
|
<span className="font">订单信息</span> |
||||
|
</div> |
||||
|
<div className="order-msg"> |
||||
|
<div className="order"> |
||||
|
<span className="message"> |
||||
|
停车场名称： |
||||
|
</span> |
||||
|
<span> |
||||
|
{getRecordData.road_name} |
||||
|
</span> |
||||
|
</div> |
||||
|
<div className="order"> |
||||
|
<span className="message"> |
||||
|
手机号： |
||||
|
</span> |
||||
|
<span> |
||||
|
{getRecordData.phone} |
||||
|
</span> |
||||
|
</div> |
||||
|
<div className="order"> |
||||
|
<span className="message"> |
||||
|
车牌号： |
||||
|
</span> |
||||
|
<span> |
||||
|
{getRecordData.plate} |
||||
|
</span> |
||||
|
</div> |
||||
|
<div className="order"> |
||||
|
<span className="message"> |
||||
|
同步MS状态： |
||||
|
</span> |
||||
|
<span> |
||||
|
{getRecordData.phone} |
||||
|
</span> |
||||
|
</div> |
||||
|
<div className="order"> |
||||
|
<span className="message"> |
||||
|
订购时间： |
||||
|
</span> |
||||
|
<span className={getRecordData.status === 1 ? 'status-color' : 'status-bg'}> |
||||
|
{getRecordData.status === 1 ? '同步失败' : '同步成功'} |
||||
|
</span> |
||||
|
</div> |
||||
|
<div className="order"> |
||||
|
<span className="message"> |
||||
|
支付方式： |
||||
|
</span> |
||||
|
<span> |
||||
|
{getRecordData.method} |
||||
|
</span> |
||||
|
</div> |
||||
|
<div className="order"> |
||||
|
<span className="message"> |
||||
|
订单金额： |
||||
|
</span> |
||||
|
<span> |
||||
|
{getRecordData.order_amount} |
||||
|
</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div className="carTitle" style={{ marginTop: 20 }}> |
||||
|
<span className="font">商品信息</span> |
||||
|
</div> |
||||
|
<div className="sale-msg"> |
||||
|
<div className="order"> |
||||
|
<span className="message"> |
||||
|
销售金额： |
||||
|
</span> |
||||
|
<span> |
||||
|
{getRecordData.price} |
||||
|
</span> |
||||
|
</div> |
||||
|
<div className="order"> |
||||
|
<span className="message"> |
||||
|
有效时间： |
||||
|
</span> |
||||
|
<span> |
||||
|
{getRecordData.effective_date} |
||||
|
</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div className="submitBtn"> |
||||
|
<button type="primary" className="cancel colorReset" onClick={() => { placeBtn() }}> |
||||
|
返回 |
||||
|
</button> |
||||
|
</div> |
||||
|
</Modal> |
||||
|
</> |
||||
} |
} |
||||
|
|
||||
export default ComplainManage; |
export default ComplainManage; |
||||
@ -1,15 +1,244 @@ |
|||||
import React, { useState, useRef, useEffect } from "react"; |
import React, { useState, useRef, useEffect } from "react"; |
||||
// import { message, Pagination, Table, Space, Modal, } from "antd"; |
|
||||
// import { dictionary, utils } from "@/config/common"; |
|
||||
// import moment from 'moment' |
|
||||
// import { useSessionStorageState, useUpdateEffect, useSize, useUpdate } from 'ahooks'; |
|
||||
// import ajax from "@/services" |
|
||||
// import { FormInput, FormSelect, OptionPanel, ResultPanel, FormSliderPicker, AreaCascader, ImgResize, ImgZoom, } from "@/components" |
|
||||
// import "./index.scss"; |
|
||||
// import errorImg from "@/assets/images/layout/error.png" |
|
||||
// import { useLocation } from "react-router-dom"; |
|
||||
function StaggeredStat() { |
|
||||
return <div>StaggeredStat</div> |
|
||||
|
import { ResultFlowResult } from "@/components" |
||||
|
import { Select, Input, Button, Table, message, TreeSelect, Pagination, DatePicker, Space} from 'antd' |
||||
|
import { |
||||
|
pageSizeOptions |
||||
|
} from '@/config/character.config.js' |
||||
|
import "./index.scss"; |
||||
|
import { SearchOutlined, DeleteOutlined } from '@ant-design/icons'; |
||||
|
import ajax from '@/services' |
||||
|
import { useSessionStorageState } from "ahooks" |
||||
|
import { useNavigate, useLocation } from "react-router-dom" |
||||
|
const { RangePicker } = DatePicker; |
||||
|
import moment from 'moment' |
||||
|
function StaggeredStat(props) { |
||||
|
// const configData = props.sysConfig["lib-deploy"] || {}; |
||||
|
const [ajaxLoading, setAjaxLoading] = useState(false) |
||||
|
const location = useLocation() |
||||
|
|
||||
|
const [resultData, setResultData] = useState({ |
||||
|
data: [], |
||||
|
total_records: 0, |
||||
|
export_url: '', |
||||
|
process_url: "" |
||||
|
}) |
||||
|
const parameter = { |
||||
|
road: '',//停车场名称 |
||||
|
phone: '',//手机号 |
||||
|
start_date: moment().subtract(30, 'days').startOf('day').format('YYYY-MM-DD '), |
||||
|
end_date: moment().format('YYYY-MM-DD '), |
||||
|
pn: 1, |
||||
|
page_size: Number(pageSizeOptions[0]), // 每页条数 |
||||
|
} |
||||
|
const [formData, setFormData] = useState(parameter) |
||||
|
const [lastFormData, setLastFormData] = useState(formData) |
||||
|
const lastFormDataRef = useRef(formData) |
||||
|
|
||||
|
|
||||
|
//停车场名称 |
||||
|
const handlePartName = (value) => { |
||||
|
setFormData({ ...formData, road: value.target.value }) |
||||
|
} |
||||
|
//统计时间 |
||||
|
const onChange = (value, dateString) => { |
||||
|
console.log('Formatted Selected Time: ', dateString); |
||||
|
setFormData({ |
||||
|
...formData, |
||||
|
start_date: dateString[0], |
||||
|
end_date: dateString[1] |
||||
|
}) |
||||
|
}; |
||||
|
|
||||
|
//导出 |
||||
|
const exportData = () => { |
||||
|
let data = { |
||||
|
...formData |
||||
|
} |
||||
|
ajax.getStaggeredStatExport(data).then(res => { |
||||
|
window.open(res.data.url) |
||||
|
}) |
||||
|
} |
||||
|
//列表 |
||||
|
const handleColumns = (tab) => { |
||||
|
let result = [...deployListColumns]; |
||||
|
switch (tab) { |
||||
|
case '1': |
||||
|
result.splice(5, 1) |
||||
|
break; |
||||
|
|
||||
|
} |
||||
|
return result; |
||||
|
} |
||||
|
//列表 |
||||
|
const deployListColumns = [ |
||||
|
{ |
||||
|
title: '序号', |
||||
|
render: (_, record, index) => { |
||||
|
return index + 1 |
||||
|
} |
||||
|
}, |
||||
|
{ |
||||
|
title: '停车场名称', |
||||
|
dataIndex: 'road_name', |
||||
|
key: 'road_name', |
||||
|
}, |
||||
|
{ |
||||
|
title: '销售数量', |
||||
|
dataIndex: 'num', |
||||
|
key: 'num', |
||||
|
}, |
||||
|
{ |
||||
|
title: '实收金额', |
||||
|
dataIndex: 'total', |
||||
|
key: 'total', |
||||
|
}] |
||||
|
//重置数据 |
||||
|
const getResetData = () => { |
||||
|
setFormData({ |
||||
|
...parameter |
||||
|
}) |
||||
|
getData({ ...parameter }) |
||||
|
} |
||||
|
// 获取列表数据 |
||||
|
const getData = (data = formData) => { |
||||
|
setAjaxLoading(true) |
||||
|
ajax.getStaggeredStatData(data).then(res => { |
||||
|
setAjaxLoading(false) |
||||
|
if (res.status === 20000) { |
||||
|
let resDataArr = res.data.list.map((item) => { |
||||
|
item.key = item.id |
||||
|
return item |
||||
|
}) |
||||
|
setResultData({ |
||||
|
...resultData, |
||||
|
data: resDataArr, |
||||
|
total_records: res.data.total |
||||
|
}) |
||||
|
} else { |
||||
|
setResultData({ |
||||
|
data: [], |
||||
|
total_records: 0, |
||||
|
export_url: '', |
||||
|
process_url: "" |
||||
|
}) |
||||
|
message.error(res.message) |
||||
|
} |
||||
|
}, err => { |
||||
|
console.log(err) |
||||
|
}) |
||||
|
} |
||||
|
//切换分页 |
||||
|
const changePn = (pn, length) => { |
||||
|
if (lastFormData.page_size === length) { |
||||
|
setLastFormData(Object.assign({}, lastFormData, { pn: pn })) |
||||
|
lastFormDataRef.current = Object.assign({}, lastFormData, { pn: pn }) |
||||
|
getData(Object.assign({}, lastFormData, { pn: pn })) |
||||
|
} |
||||
|
} |
||||
|
//切换每页条数 |
||||
|
const changeLength = (pn, length) => { |
||||
|
setFormData(Object.assign({}, formData, { pn: 1, page_size: length })) |
||||
|
setLastFormData(Object.assign({}, lastFormData, { pn: 1, page_size: length })) |
||||
|
lastFormDataRef.current = Object.assign({}, lastFormData, { pn: 1, page_size: length }) |
||||
|
getData(Object.assign({}, lastFormData, { pn: 1, page_size: length })) |
||||
|
} |
||||
|
//检索数据 |
||||
|
const getSearchData = (data = formData) => { |
||||
|
getData(data) |
||||
|
} |
||||
|
const [sessionTabList, setSessionTabList] = useSessionStorageState('StaggeredStat', { |
||||
|
value: { |
||||
|
} |
||||
|
}) |
||||
|
useEffect(() => { |
||||
|
console.log(location) |
||||
|
if (sessionTabList && Object.values(sessionTabList).length > 0) { |
||||
|
setFormData({ |
||||
|
road: sessionTabList?.road, |
||||
|
start_date: sessionTabList?.start_date, |
||||
|
end_date: sessionTabList?.end_date |
||||
|
}) |
||||
|
} |
||||
|
}, []) |
||||
|
useEffect(() => { |
||||
|
setSessionTabList({ |
||||
|
...formData |
||||
|
}) |
||||
|
}, [formData]) |
||||
|
useEffect(() => { |
||||
|
getData() |
||||
|
}, []) |
||||
|
return <> |
||||
|
<div className="paid-StaggeredStat"> |
||||
|
<div className="paid-search"> |
||||
|
<label className="search">查询条件</label> |
||||
|
<div className="yisa-search"> |
||||
|
<label>停车场名称</label> |
||||
|
<Input |
||||
|
placeholder="请输入停车场名称" |
||||
|
value={formData.road} |
||||
|
style={{ width: 255 }} |
||||
|
onChange={handlePartName} |
||||
|
/> |
||||
|
</div> |
||||
|
<div className="yisa-search"> |
||||
|
<label>统计时间</label> |
||||
|
<Space direction="vertical" size={12}> |
||||
|
<RangePicker |
||||
|
value={[moment(formData.start_date), moment(formData.end_date)]} |
||||
|
allowClear={false} |
||||
|
style={{ width: 255,marginLeft:14 }} |
||||
|
format="YYYY-MM-DD" |
||||
|
onChange={onChange} |
||||
|
/> |
||||
|
</Space> |
||||
|
</div> |
||||
|
<div className="timePicker yisa-search"> |
||||
|
<div className="btnBox"> |
||||
|
<Button type="primary" className="yisa-btn colorBtn" icon={<SearchOutlined />} onClick={() => { getSearchData() }}> |
||||
|
搜索 |
||||
|
</Button> |
||||
|
<Button type="primary" className="yisa-btn colorReset" icon={<DeleteOutlined />} onClick={() => { getResetData() }}> |
||||
|
清空 |
||||
|
</Button> |
||||
|
<Button type="primary" className="yisa-btn colorBtn" onClick={() => { exportData() }}> |
||||
|
导出 |
||||
|
</Button> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div className="paid-result"> |
||||
|
<div className="result"> |
||||
|
<span className="font">共检索到<em>{resultData.total_records}</em>条结果</span> |
||||
|
<ResultFlowResult ajaxLoad={ajaxLoading} resultData={resultData.data ? resultData.data : []}> |
||||
|
<Table |
||||
|
bordered |
||||
|
// className='yisa-table' |
||||
|
dataSource={resultData.data} |
||||
|
columns={ |
||||
|
handleColumns() |
||||
|
} |
||||
|
pagination={false} |
||||
|
loading={ajaxLoading} |
||||
|
/> |
||||
|
<Pagination |
||||
|
className="pagination-common" |
||||
|
showSizeChanger |
||||
|
showQuickJumper |
||||
|
showTotal={() => `共 ${resultData.total_records} 条`} |
||||
|
total={resultData.total_records} |
||||
|
current={lastFormData.pn} |
||||
|
pageSize={lastFormData.page_size} |
||||
|
pageSizeOptions={pageSizeOptions} |
||||
|
onChange={changePn} |
||||
|
onShowSizeChange={changeLength} |
||||
|
/> |
||||
|
</ResultFlowResult> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
</div> |
||||
|
</> |
||||
} |
} |
||||
|
|
||||
export default StaggeredStat; |
export default StaggeredStat; |
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue