陈宇航
1 year ago
7 changed files with 716 additions and 331 deletions
-
26src/config/character.config.js
-
263src/pages/FinancialMgm/ExceptionDeal/StartExceptionDeal/index.jsx
-
17src/pages/FinancialMgm/ExceptionDeal/StartExceptionDeal/index.scss
-
314src/pages/MerchantMgm/InvoiceConf/index.scss
-
74src/pages/MerchantMgm/InvoiceConf/loadable.jsx
-
317src/pages/MerchantMgm/MerchantInfo/index.scss
-
36src/pages/MerchantMgm/MerchantInfo/loadable.jsx
@ -1,15 +1,256 @@ |
|||
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"; |
|||
import { |
|||
message, |
|||
Pagination, |
|||
Table, |
|||
Space, |
|||
Modal, |
|||
Select, |
|||
Input, |
|||
Cascader, |
|||
DatePicker, |
|||
Button |
|||
} 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 StartExceptionDeal() { |
|||
return <div>StartExceptionDeal</div> |
|||
// 默认数据 |
|||
const defaultData = { |
|||
park_id: "", // 停车订单ID |
|||
operator_id: 0, // 商户名称 |
|||
area: [0], // 区域 |
|||
road_id: "", // 车场名称 |
|||
road_type: 0, // 车场类型 |
|||
plate: "", // 车牌号 |
|||
exit_gate: 2, // 出入场类型 |
|||
start_date: moment().subtract(7, "days").startOf("day").format("YYYY-MM-DD HH:mm:ss"), // 开始时间 |
|||
end_date: moment().format("YYYY-MM-DD HH:mm:ss"), // 结束时间 |
|||
}; |
|||
// session缓存 |
|||
const [defaultParams, setDefaultParams] = useSessionStorageState( |
|||
"formData_editOrderInquiry", |
|||
{ defaultValue: null } |
|||
); |
|||
|
|||
// 表单数据 |
|||
const [formData, setFormData] = useState({ |
|||
...defaultData, |
|||
...defaultParams, |
|||
}); |
|||
const [operatorList, setOperatorList] = useState([ |
|||
{ value: 0, label: "全部" }, |
|||
]); //商户名称 |
|||
const [areaList, setAreaList] = useState([]); //区域的下拉数据 |
|||
|
|||
const [loading, setLoading] = useState(false); // 检索按钮加载状态 |
|||
|
|||
// 获取商户名称 |
|||
const $getAllOperator = () => { |
|||
ajax |
|||
.getAllOperator() |
|||
.then((res) => { |
|||
if (res.status === 20000 || res.status == 0) { |
|||
setOperatorList(res.data || { value: 0, label: "全部" }); |
|||
} else { |
|||
message.error(res.message); |
|||
} |
|||
}) |
|||
.catch((error) => { |
|||
message.error(error.message); |
|||
}); |
|||
}; |
|||
|
|||
// 获取区域树结构 |
|||
const $getAreaList = () => { |
|||
ajax |
|||
.getAreaTree() |
|||
.then((res) => { |
|||
if (res.status === 20000 || res.status == 0) { |
|||
setAreaList( |
|||
res.data || [{ name: "全部", id: 0, level: 1, children: [] }] |
|||
); |
|||
} else { |
|||
message.error(res.message); |
|||
} |
|||
}) |
|||
.catch((error) => { |
|||
message.error(error.message); |
|||
}); |
|||
}; |
|||
|
|||
useEffect(() => { |
|||
$getAllOperator(); |
|||
$getAreaList(); |
|||
}, []); |
|||
|
|||
return ( |
|||
<div className="start-exception-deal edit-order-inquiry"> |
|||
<div className="paid-search"> |
|||
<div className="title">查询条件</div> |
|||
<div className="form-Wrap"> |
|||
<div className="yisa-search"> |
|||
<label>停车订单ID</label> |
|||
<Input |
|||
className="form-con" |
|||
placeholder="请输入停车订单ID" |
|||
value={formData?.park_id} |
|||
allowClear |
|||
onChange={(e) => |
|||
setFormData({ ...formData, park_id: e.target.value || "" }) |
|||
} |
|||
/> |
|||
</div> |
|||
<div className="yisa-search"> |
|||
<label>区域</label> |
|||
<Cascader |
|||
className="form-con" |
|||
popupClassName="start-exception-deal-cascader" |
|||
options={areaList} |
|||
placeholder="请选择区域" |
|||
expandTrigger="hover" |
|||
// changeOnSelect |
|||
fieldNames={{ |
|||
label: "name", |
|||
value: "id", |
|||
children: "children", |
|||
}} |
|||
value={formData.area} |
|||
onChange={(v, option) => { |
|||
setFormData({ ...formData, area: v ? v : [0] }); |
|||
}} |
|||
/> |
|||
</div> |
|||
<div className="yisa-search"> |
|||
<label>商户名称</label> |
|||
<Select |
|||
className="form-con" |
|||
placeholder="请选择" |
|||
options={operatorList} |
|||
allowClear |
|||
value={formData.operator_id} |
|||
onChange={(v) => setFormData({ ...formData, operator_id: v || 0})} |
|||
/> |
|||
</div> |
|||
<div className="yisa-search"> |
|||
<label>车场名称</label> |
|||
<Input |
|||
className="form-con" |
|||
placeholder="请输入车场名称" |
|||
allowClear |
|||
value={formData?.road_id} |
|||
onChange={(e) => |
|||
setFormData({ ...formData, road_id: e.target.value || "" }) |
|||
} |
|||
/> |
|||
</div> |
|||
<div className="yisa-search"> |
|||
<label>车场类型</label> |
|||
<Select |
|||
className="form-con" |
|||
placeholder="请选择" |
|||
allowClear |
|||
options={dictionary.roadType} |
|||
value={formData.road_type} |
|||
onChange={(v) => setFormData({ ...formData, road_type: v || 0})} |
|||
/> |
|||
</div> |
|||
<div className="yisa-search"> |
|||
<label>车牌号</label> |
|||
<Input |
|||
className="form-con" |
|||
placeholder="请输入车牌号" |
|||
allowClear |
|||
value={formData?.plate} |
|||
onChange={(e) => |
|||
setFormData({ ...formData, plate: e.target.value || "" }) |
|||
} |
|||
/> |
|||
</div> |
|||
<div className="yisa-search"> |
|||
<label>出入场类型</label> |
|||
<Select |
|||
className="form-con" |
|||
placeholder="请选择" |
|||
options={[ |
|||
{ |
|||
label: "出场", |
|||
value: 1, |
|||
}, |
|||
{ |
|||
label: "入场", |
|||
value: 2, |
|||
}, |
|||
]} |
|||
value={formData.exit_gate} |
|||
onChange={(v) => setFormData({ ...formData, exit_gate: v})} |
|||
/> |
|||
</div> |
|||
<div className="yisa-search"> |
|||
<label>开始时间</label> |
|||
<DatePicker |
|||
className="form-con" |
|||
showTime |
|||
format={"YYYY-MM-DD HH:mm:ss"} |
|||
defaultValue={moment(formData.start_date)} |
|||
disabledDate={(current) => current > moment(formData.end_date)} |
|||
onChange={(date, time) => { |
|||
setFormData({ ...formData, start_date: time || null }) |
|||
}} |
|||
/> |
|||
</div> |
|||
<div className="yisa-search"> |
|||
<label>结束时间</label> |
|||
<DatePicker |
|||
className="form-con" |
|||
showTime |
|||
format={"YYYY-MM-DD HH:mm:ss"} |
|||
defaultValue={moment(formData.end_date)} |
|||
disabledDate={(current) => current < moment(formData.start_date)} |
|||
onChange={(date, time) => { |
|||
setFormData({ ...formData, end_date: time || null }) |
|||
}} |
|||
/> |
|||
</div> |
|||
<div className="form-btn"> |
|||
<Button |
|||
className="reset" |
|||
onClick={() => setFormData(defaultData)} |
|||
> |
|||
重置 |
|||
</Button> |
|||
<Button |
|||
className="submit" |
|||
type="primary" |
|||
// onClick={handleSearch} |
|||
loading={loading} |
|||
> |
|||
查询 |
|||
</Button> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
); |
|||
} |
|||
|
|||
export default StartExceptionDeal; |
|||
export default StartExceptionDeal; |
|||
@ -1,5 +1,14 @@ |
|||
@import "@/assets/css/mixin.scss"; |
|||
$color-container-bg : var(--color-container-bg); |
|||
$color-user-list-bg : var(--color-user-list-bg); |
|||
$color-text : var(--color-text); |
|||
$color-primary : var(--color-primary); |
|||
$color-container-bg: var(--color-container-bg); |
|||
$color-user-list-bg: var(--color-user-list-bg); |
|||
$color-text: var(--color-text); |
|||
$color-primary: var(--color-primary); |
|||
|
|||
.start-exception-deal { |
|||
} |
|||
|
|||
.start-exception-deal-cascader { |
|||
.ant-cascader-menu-item-active { |
|||
background-color: var(--color-tag-bg) !important; |
|||
} |
|||
} |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue