陈宇航
1 year ago
6 changed files with 893 additions and 18 deletions
-
8src/config/character.config.js
-
4src/pages/MerchantMgm/InvoiceConf/loadable.jsx
-
56src/pages/OperationCenter/OperationSales/YardDiscount/DebounceSelect.jsx
-
291src/pages/OperationCenter/OperationSales/YardDiscount/index.scss
-
502src/pages/OperationCenter/OperationSales/YardDiscount/loadable.jsx
-
40src/services/OperationCenter/OperationSales/index.js
@ -0,0 +1,56 @@ |
|||
import { Select, Spin } from 'antd'; |
|||
import _ from 'lodash'; |
|||
import React, { useEffect, useMemo, useRef, useState } from 'react'; |
|||
|
|||
/** |
|||
* |
|||
* @param {type} 1车牌号，2路段/停车场名称，3收费员，4活动名称 |
|||
* @returns |
|||
*/ |
|||
const DebounceSelect = ({ |
|||
fetchOptions, |
|||
ajaxType, |
|||
debounceTimeout = 800, |
|||
...props |
|||
}) => { |
|||
const [fetching, setFetching] = useState(false); |
|||
const [options, setOptions] = useState([]); |
|||
const fetchRef = useRef(0); |
|||
const debounceFetcher = useMemo(() => { |
|||
const $loadOptions = (value) => { |
|||
fetchRef.current += 1; |
|||
const fetchId = fetchRef.current; |
|||
setOptions([]); |
|||
setFetching(true); |
|||
fetchOptions({value, type: ajaxType}).then((newOptions) => { |
|||
if (fetchId !== fetchRef.current) { |
|||
// for fetch callback order |
|||
return; |
|||
} |
|||
setOptions(newOptions); |
|||
setFetching(false); |
|||
}); |
|||
}; |
|||
if(props?.value?.length) { |
|||
return _.debounce($loadOptions, 0) |
|||
}; |
|||
return _.debounce($loadOptions, debounceTimeout); |
|||
}, [fetchOptions, debounceTimeout]); |
|||
|
|||
useEffect(() => { |
|||
if(props?.value?.length) debounceFetcher(); |
|||
}, []); |
|||
return ( |
|||
<Select |
|||
// labelInValue |
|||
filterOption={false} |
|||
onSearch={debounceFetcher} |
|||
showSearch={true} |
|||
notFoundContent={fetching ? <Spin size="small" /> : null} |
|||
{...props} |
|||
options={options} |
|||
/> |
|||
); |
|||
}; |
|||
|
|||
export default DebounceSelect; |
|||
@ -1,15 +1,495 @@ |
|||
|
|||
|
|||
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 YardDiscount() { |
|||
return <div>YardDiscount</div> |
|||
import { message, Pagination, Table, Select, Popconfirm, Input, DatePicker, Button, Popover, Modal } from "antd"; |
|||
import { dictionary, utils } from "@/config/common"; |
|||
import moment from "moment"; |
|||
import { useSessionStorageState } from "ahooks"; |
|||
import ajax from "@/services"; |
|||
import { QuickMenu, ParkingRecordModal } from "@/components"; |
|||
import DebounceSelect from "./DebounceSelect"; |
|||
import "./index.scss"; |
|||
import { use } from "echarts"; |
|||
const { RangePicker } = DatePicker; |
|||
const YardDiscount = () => { |
|||
// 默认数据 |
|||
const defaultData = { |
|||
activity: [], // 活动名称 |
|||
road: [], // 停车场名称 |
|||
status: "0", // 状态 |
|||
pn: 1, |
|||
page_size: dictionary?.pageSizeOptions1[0] |
|||
}; |
|||
|
|||
// 默认模态框数据 |
|||
const defaultModal = { |
|||
activity: [], // 活动名称 |
|||
road: [], // 停车场名称 |
|||
discount: "", // 折扣 |
|||
start_time: null, // 开始时间 |
|||
end_time: null,// 结束时间 |
|||
} |
|||
|
|||
//列表 |
|||
const tableColumns = [ |
|||
{ |
|||
title: "活动名称", |
|||
dataIndex: "activity", |
|||
key: "activity", |
|||
align: "center", |
|||
}, |
|||
{ |
|||
title: "停车场名称", |
|||
dataIndex: "road", |
|||
key: "road", |
|||
align: "center", |
|||
}, |
|||
{ |
|||
title: "折扣", |
|||
dataIndex: "discount", |
|||
key: "discount", |
|||
align: "center", |
|||
render: (text, record, index) => { |
|||
return <>{record.discount || "--"}%</> |
|||
}, |
|||
}, |
|||
{ |
|||
title: "活动时间", |
|||
dataIndex: "start_time", |
|||
key: "start_time", |
|||
align: "center", |
|||
render: (text, record, index) => { |
|||
return <> |
|||
<span>{record?.start_time || "--"} 至 {record?.end_time}</span> |
|||
</> |
|||
}, |
|||
}, |
|||
{ |
|||
title: "状态", |
|||
dataIndex: "status", |
|||
key: "status", |
|||
align: "center", |
|||
width: 150, |
|||
render: (text, record, index) => { |
|||
let content = '--' |
|||
switch (text) { |
|||
case "0": |
|||
content = "全部" |
|||
break; |
|||
case "1": |
|||
content = "进行中" |
|||
break; |
|||
case "2": |
|||
content = "未开始" |
|||
break; |
|||
case "3": |
|||
content = "已下架" |
|||
break; |
|||
case "4": |
|||
content = "已结束" |
|||
break; |
|||
default: |
|||
break; |
|||
} |
|||
return <>{content}</> |
|||
}, |
|||
}, |
|||
{ |
|||
title: "更新时间", |
|||
dataIndex: "update_time", |
|||
key: "update_time", |
|||
align: "center", |
|||
}, |
|||
|
|||
{ |
|||
title: '操作', |
|||
key: 'operation', |
|||
dataIndex: 'operation', |
|||
align: "center", |
|||
fixed: 'right', |
|||
width: 100, |
|||
render: (text, record, index) => { |
|||
return <> |
|||
<Popover |
|||
overlayClassName="start-exception-deal-operate" |
|||
content={ |
|||
<div className="operateBtn operate-btn" style={{ cursor: "pointer" }} trigger="hover"> |
|||
<div |
|||
className="hover" |
|||
onClick={() => { |
|||
setModalData({ |
|||
activity: record?.activity_id?.split() || [], |
|||
road: record?.road_id?.split() || [], |
|||
discount: record?.discount || "", |
|||
start_time: record?.start_time || null, |
|||
end_time: record?.end_time || null |
|||
}); |
|||
setModalVisible({ |
|||
open: true, |
|||
title: "查看", |
|||
}); |
|||
}} |
|||
> |
|||
查看 |
|||
</div> |
|||
{record?.status == 1 ? |
|||
<Popconfirm placement="left" title="您确定要下架该活动吗？" onConfirm={() => { $deleteConfirm(record?.id, "下架") }} okText="确认" cancelText="取消"> |
|||
<div className="hover">下架</div> |
|||
</Popconfirm> : |
|||
record?.status == 2 ? |
|||
<> |
|||
<div |
|||
className="hover" |
|||
onClick={() => { |
|||
setModalData({ |
|||
activity: record?.activity_id?.split() || [], |
|||
road: record?.road_id?.split() || [], |
|||
discount: record?.discount || "", |
|||
start_time: record?.start_time || null, |
|||
end_time: record?.end_time || null |
|||
}); |
|||
setModalVisible({ |
|||
open: true, |
|||
title: "编辑", |
|||
}); |
|||
}} |
|||
> |
|||
编辑 |
|||
</div> |
|||
<Popconfirm placement="left" title="您确定要删除该活动吗？" onConfirm={() => { $deleteConfirm(record?.id, "删除") }} okText="确认" cancelText="取消"> |
|||
<div className="hover">删除</div> |
|||
</Popconfirm> |
|||
</> : |
|||
"" |
|||
} |
|||
</div> |
|||
} |
|||
> |
|||
<Button type="primary">操作</Button> |
|||
</Popover> |
|||
</> |
|||
}, |
|||
}, |
|||
]; |
|||
|
|||
const [formData, setFormData] = useState(defaultData); // 表单数据 |
|||
const [sessionData, setSessionData] = useSessionStorageState("yardDiscount", { value: {} }); // session缓存 |
|||
const [loading, setLoading] = useState(false); // 检索按钮加载状态 |
|||
const [modalVisible, setModalVisible] = useState({open: false, title: ""}); // 模态框开关 |
|||
const [modalData, setModalData] = useState(defaultModal); // 模态框数据 |
|||
// 表格返回数据 |
|||
const [resultData, setResultData] = useState({ |
|||
total: 0, |
|||
list: [], |
|||
}); |
|||
|
|||
|
|||
|
|||
// 活动名称模糊搜索数据 |
|||
const $fetchActivityList = (value) => { |
|||
return ajax.fetchActivityData({ ...value }).then((res) => { |
|||
if (res.status === 20000 || res.status == 0) { |
|||
if (res?.data?.length) return res.data; |
|||
} else { |
|||
message.error(res.message); |
|||
} |
|||
}).catch((error) => { |
|||
message.error(error.message); |
|||
}); |
|||
}; |
|||
|
|||
// 分页 |
|||
const $changePn = (pn, page_size) => { |
|||
let temFormData = {}; |
|||
if (formData.page_size == page_size) { |
|||
temFormData = { |
|||
...formData, |
|||
pn |
|||
}; |
|||
} else { |
|||
temFormData = { |
|||
...formData, |
|||
pn: 1, |
|||
page_size, |
|||
}; |
|||
}; |
|||
setFormData(temFormData); |
|||
$getTableList(temFormData); |
|||
}; |
|||
|
|||
// 删除及下架 |
|||
const $deleteConfirm = (id, type) => { |
|||
let url = type == "下架" ? ajax.yardDiscountDown : ajax.yardDiscountDelete; |
|||
url({ id }).then((res) => { |
|||
if (res.status === 20000 || res.status == 0) { |
|||
message.success(res.message || `${type}成功`); |
|||
$getTableList(); |
|||
} else { |
|||
message.error(res.message); |
|||
} |
|||
}).catch((error) => { |
|||
message.error(error.message); |
|||
}); |
|||
}; |
|||
|
|||
// 获取表格数据 |
|||
const $getTableList = (value = {}) => { |
|||
let _data = { |
|||
...formData, |
|||
...value, |
|||
activity: value?.activity?.length ? value?.activity.join() : formData?.activity?.length ? formData?.activity.join() : "", |
|||
road: value?.road?.length ? value?.road.join() : formData?.road?.length ? formData?.road.join() : "", |
|||
}; |
|||
setLoading(true); |
|||
ajax.yardDiscountTableData(_data).then((res) => { |
|||
setLoading(false); |
|||
if (res.status === 20000 || res.status == 0) { |
|||
setResultData(res?.data || { total: 0, list: [] }); |
|||
} else { |
|||
message.error(res.message); |
|||
} |
|||
}).catch((error) => { |
|||
message.error(error.message); |
|||
}); |
|||
}; |
|||
const $disabledDate = (current) => { |
|||
// Can not select days before today and today |
|||
return current && current <= moment().subtract(1, 'day'); |
|||
}; |
|||
|
|||
useEffect(() => { |
|||
let _data = {}; |
|||
if (sessionData && Object.values(sessionData).length > 0) { |
|||
_data = { |
|||
activity: sessionData?.activity || [], // 活动名称 |
|||
road: sessionData?.road || [], // 活动名称 |
|||
pn: 1, |
|||
page_size: dictionary?.pageSizeOptions1[0], |
|||
}; |
|||
setFormData({ ..._data }); |
|||
}; |
|||
$getTableList(_data); |
|||
}, []); |
|||
|
|||
useEffect(() => { |
|||
// setSessionData(formData); |
|||
}, [formData]); |
|||
|
|||
return ( |
|||
<div className="yard-discount"> |
|||
<div className="paid-search"> |
|||
<div className="title">查询条件</div> |
|||
<div className="form-Wrap"> |
|||
<div className="yisa-search debounce-select"> |
|||
<label>活动名称</label> |
|||
<DebounceSelect |
|||
className="form-con" |
|||
popupClassName="yard-discount-sel-modal" |
|||
placeholder="请输入活动名称" |
|||
ajaxType="2" |
|||
mode="multiple" |
|||
allowClear |
|||
value={formData?.activity || []} |
|||
fetchOptions={$fetchActivityList} |
|||
onChange={(newValue) => { |
|||
let value = newValue.slice(-1); |
|||
setFormData({ |
|||
...formData, |
|||
activity: value |
|||
}); |
|||
}} |
|||
/> |
|||
</div> |
|||
<div className="yisa-search debounce-select"> |
|||
<label>停车场名称</label> |
|||
<DebounceSelect |
|||
className="form-con" |
|||
popupClassName="yard-discount-sel-modal" |
|||
placeholder="请输入停车场名称" |
|||
allowClear |
|||
ajaxType="4" |
|||
mode="multiple" |
|||
value={formData?.road || []} |
|||
fetchOptions={$fetchActivityList} |
|||
onChange={(newValue) => { |
|||
let value = newValue.slice(-1); |
|||
setFormData({ |
|||
...formData, |
|||
road: value |
|||
}); |
|||
}} |
|||
/> |
|||
</div> |
|||
<div className="yisa-search"> |
|||
<label>商户名称</label> |
|||
<Select |
|||
className="form-con" |
|||
placeholder="请选择" |
|||
options={dictionary.YardDiscountType} |
|||
allowClear |
|||
value={formData.status} |
|||
onChange={(v) => setFormData({ ...formData, status: v || "0" })} |
|||
/> |
|||
</div> |
|||
<div className="form-btn"> |
|||
<Button |
|||
className="submit" |
|||
type="primary" |
|||
loading={loading} |
|||
onClick={() => { |
|||
let _data = { |
|||
...formData, |
|||
pn: 1, |
|||
page_size: dictionary?.pageSizeOptions1[0] |
|||
} |
|||
setFormData(_data) |
|||
$getTableList(_data) |
|||
}} |
|||
> |
|||
查询 |
|||
</Button> |
|||
<Button |
|||
className="add" |
|||
type="primary" |
|||
onClick={() => setModalVisible({open: true, title: "添加"})} |
|||
> |
|||
添加 |
|||
</Button> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div className="paid-result"> |
|||
<div className="result"> |
|||
<div className="result-data"> |
|||
<Table |
|||
rowKey={(row) => row.park_id} |
|||
className="table" |
|||
dataSource={resultData?.list || []} |
|||
columns={tableColumns} |
|||
pagination={false} |
|||
loading={loading} |
|||
scroll={{ y: "calc(100vh - 265px)" }} |
|||
/> |
|||
<Pagination |
|||
className="pagination-common" |
|||
showSizeChanger={true} |
|||
showQuickJumper={true} |
|||
showTotal={() => `共 ${resultData.total || 0} 条`} |
|||
total={resultData.total} |
|||
current={formData.pn} |
|||
pageSize={formData.page_size} |
|||
pageSizeOptions={dictionary?.pageSizeOptions1} |
|||
onChange={$changePn} |
|||
/> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<Modal |
|||
className="yard-discount-modal" |
|||
title={modalVisible.title} |
|||
open={modalVisible.open} |
|||
onCancel={() => { |
|||
setModalVisible({open: false, title: ""}); |
|||
setModalData(defaultModal); |
|||
}} |
|||
destroyOnClose={true} |
|||
footer={[ |
|||
modalVisible.title != "查看" ? |
|||
<Button key="提交" type="primary" onClick={() => {console.log(modalData, "这是确定");}}>提交</Button> |
|||
: "", |
|||
<Button key="取消" onClick={() => { |
|||
setModalVisible({open: false, title: ""}); |
|||
setModalData(defaultModal); |
|||
}}> |
|||
取消 |
|||
</Button>, |
|||
]} |
|||
> |
|||
<div className="form-Wrap"> |
|||
<div className="yisa-search debounce-select"> |
|||
<label><em>*</em> 活动名称</label> |
|||
<DebounceSelect |
|||
className="form-con" |
|||
popupClassName="yard-discount-sel-modal" |
|||
placeholder="请输入活动名称" |
|||
disabled={modalVisible.title == "查看" ? true : false} |
|||
ajaxType="2" |
|||
mode="multiple" |
|||
allowClear |
|||
value={modalData?.activity || []} |
|||
fetchOptions={$fetchActivityList} |
|||
onChange={(newValue) => { |
|||
let value = newValue.slice(-1); |
|||
setModalData({ |
|||
...modalData, |
|||
activity: value |
|||
}); |
|||
}} |
|||
/> |
|||
</div> |
|||
<div className="yisa-search debounce-select"> |
|||
<label><em>*</em> 停车场名称</label> |
|||
<DebounceSelect |
|||
className="form-con" |
|||
popupClassName="yard-discount-sel-modal" |
|||
placeholder="请输入停车场名称" |
|||
ajaxType="4" |
|||
allowClear |
|||
mode="multiple" |
|||
disabled={modalVisible.title == "查看" ? true : false} |
|||
value={modalData?.road || []} |
|||
fetchOptions={$fetchActivityList} |
|||
onChange={(newValue) => { |
|||
let value = newValue.slice(-1); |
|||
setModalData({ |
|||
...modalData, |
|||
road: value |
|||
}); |
|||
}} |
|||
/> |
|||
</div> |
|||
<div className="yisa-search"> |
|||
<label><em>*</em> 折扣</label> |
|||
<Input |
|||
className="form-con" |
|||
placeholder="请输入折扣" |
|||
value={modalData?.discount} |
|||
disabled={modalVisible.title == "查看" ? true : false} |
|||
suffix="%" |
|||
onChange={(e) =>{ |
|||
let onlyNumber = /^[1-9]\d*$/; |
|||
if(onlyNumber.test(e.target.value) || e.target.value.length > 2 ? true : false) { |
|||
return message.error("折扣必须填1-99的整数"); |
|||
} |
|||
setFormData({ |
|||
...modalData, |
|||
discount: e.target.value || "" |
|||
}) |
|||
}} |
|||
/> |
|||
</div> |
|||
<div className="yisa-search"> |
|||
<label><em>*</em> 活动时间</label> |
|||
<RangePicker |
|||
disabledDate={$disabledDate} |
|||
disabled={modalVisible.title == "查看" ? true : false} |
|||
value={[ |
|||
modalData?.start_time ? moment(modalData.start_time) : null, |
|||
modalData?.end_time ? moment(modalData.end_time) : null, |
|||
]} |
|||
onChange={(date, time) => { |
|||
setModalData({ |
|||
...modalData, |
|||
start_time: time[0], |
|||
end_time: time[1] |
|||
}) |
|||
}} |
|||
/> |
|||
</div> |
|||
</div> |
|||
</Modal> |
|||
</div> |
|||
); |
|||
} |
|||
|
|||
export default YardDiscount; |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue