Browse Source

fix(): 修改发票设置和商户信息页面样式等

tags/PMS_Frontend_v1.0.6-develop
陈宇航 1 year ago
parent
commit
d4689a02f9
  1. 26
      src/config/character.config.js
  2. 261
      src/pages/FinancialMgm/ExceptionDeal/StartExceptionDeal/index.jsx
  3. 17
      src/pages/FinancialMgm/ExceptionDeal/StartExceptionDeal/index.scss
  4. 146
      src/pages/MerchantMgm/InvoiceConf/index.scss
  5. 26
      src/pages/MerchantMgm/InvoiceConf/loadable.jsx
  6. 91
      src/pages/MerchantMgm/MerchantInfo/index.scss
  7. 14
      src/pages/MerchantMgm/MerchantInfo/loadable.jsx

26
src/config/character.config.js

@ -693,7 +693,30 @@ export default {
"text": "女性",
"value": 2
},
]
],
// 财务管理 -- 异常处理 车场类型
roadType: [
{
label: "全部",
value: 0,
},
{
label: "路侧平行",
value: 1,
},
{
label: "路侧垂停",
value: 2,
},
{
label: "封闭车场",
value: 3,
},
{
label: "半封闭车场",
value: 4,
},
],
}
//商户名称
export const merchantName = [
@ -726,4 +749,5 @@ export const schedule = [
]
// 页数格式
export const pageSizeOptions = ["10", "40", "100"];
;

261
src/pages/FinancialMgm/ExceptionDeal/StartExceptionDeal/index.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;

17
src/pages/FinancialMgm/ExceptionDeal/StartExceptionDeal/index.scss

@ -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;
}
}

146
src/pages/MerchantMgm/InvoiceConf/index.scss

@ -5,83 +5,139 @@ $color-text : var(--color-text);
$color-primary : var(--color-primary);
.invoiceConf {
height: 100%;
.merchant-info-table {
display: flex;
height: 100%;
padding-top: 10px;
.panel {
display: block;
width: 375px;
padding: 0 10px 20px 20px;
background: transparent;
.title {
width: 100%;
height: 100px;
padding-top: 20px;
padding-left: 0.625rem;
background: none;
.btn {
margin: 5px 5px;
border-radius: 5px;
border: none;
font-size: 16px;
font-family: Microsoft YaHei, Microsoft YaHei-Bold;
font-weight: 700;
text-align: left;
color: var(--color-text);
margin-bottom: 10px;
}
.reset-btn {
color: #000;
background-color: #fff;
.panel-1 {
display: flex;
>.ant-form-inline {
display: block;
.ant-form-item-row {
flex: 1;
.ant-input-group {
display: flex;
.ant-input-group-addon {
width: 120px;
margin-right: 10px;
}
.create-btn {
background-color: #67C23A;
}
.search-btn {
background-color: #409EFF;
.ant-form-item-control {
flex: 1;
}
.panel-1 {
}
}
.yisa-search {
display: flex;
flex-basis: fit-content;
align-items: center;
.ant-input{
margin: 10px 0;
label {
display: inline-block;
width: 120px;
text-align: right;
margin-right: 10px;
}
.yisa-cascader {
width: 120px;
background: transparent;
border-color: var(--color-border);
}
.form-item{
margin: 5px 40px;
}
.yisa-select {
// width: 190px;
.ant-select-arrow {
background: none !important;
.ant-select-selector {
background: transparent;
border-color: var(--color-border);
}
}
.yisa-cascader {
width: 8rem;
.form-input {
// width: 190px;
background: transparent;
border-color: var(--color-border);
}
.yisa-select {
width: 11.875rem;
.ant-select-arrow {
background: none !important;
}
.ant-select-selector {
.ant-input {
background: transparent;
border-color: var(--color-border);
}
}
.search-group-item {
margin-right: 0.625rem;
width: 16.875rem;
background: transparent;
border-color: var(--color-border);
}
.btnBox {
display: flex;
margin-top: 20px;
align-items: center;
margin-right: 0;
.ant-form-item-control-input-content {
display: flex;
justify-content: space-between;
}
.btn {
width: 110px;
height: 36px;
// margin: 0 5px;
border-radius: 5px;
border: none;
}
.search-btn {
background-color: #409EFF;
}
.reset-btn {
color: #000;
background-color: #fff;
}
.table {
width: 98%;
margin: 15px 10px 10px 15px;
.create-btn {
background-color: #67C23A;
}
}
}
}
.table-content {
flex: 1;
padding-bottom: 15px;
padding: 20px;
background: var(--color-user-list-bg);
border-top-left-radius: 20px;
box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.08);
.table {
width: 100%;
max-height: calc(100% - 50px);
.ant-table-body {
@include scrollBar(var(--color-user-list-bg), #3B97FF);
}
.ant-table-thead {
th {
padding: 0px 16px;
@ -152,6 +208,8 @@ $color-primary : var(--color-primary);
}
}
}
}
}
.scheduleBtn {
background: #409eff;
@ -162,9 +220,9 @@ $color-primary : var(--color-primary);
}
#create {
height: 800px;
height: 100%;
overflow-y: scroll;
@include scrollBar(var(--color-user-list-bg), #3B97FF);
.create-form {
.btns {
display: flex;
@ -281,9 +339,9 @@ $color-primary : var(--color-primary);
}
#check {
height: 800px;
height: 100%;
overflow-y: scroll;
@include scrollBar(var(--color-user-list-bg), #3B97FF);
.check-form {
.btns {
display: flex;

26
src/pages/MerchantMgm/InvoiceConf/loadable.jsx

@ -551,8 +551,9 @@ function InvoiceConf() {
{
!createVisible && !checkVisible ?
<>
<div className="merchant-info-table">
<div className="panel">
<div className="title">查询条件</div>
<div className="panel-1">
<Form
@ -569,14 +570,14 @@ function InvoiceConf() {
label="配置ID:"
name="info_id"
labelAlign="left"
className="form-item"
className="form-item yisa-search"
>
<Input placeholder="请输入准确信息"></Input>
<Input className="form-input" placeholder="请输入准确信息"></Input>
</Form.Item>
<Form.Item
name="type_name"
className="form-item"
className="form-item yisa-search"
>
<Input
addonBefore={
@ -596,7 +597,7 @@ function InvoiceConf() {
label="发票平台:"
name="receipt_type"
labelAlign="left"
className="form-item"
className="form-item yisa-search"
>
<Select
className="yisa-select"
@ -609,7 +610,7 @@ function InvoiceConf() {
label="状态:"
name="status"
labelAlign="left"
className="form-item"
className="form-item yisa-search"
>
<Select
className="yisa-select"
@ -622,7 +623,7 @@ function InvoiceConf() {
label="最近修改时间:"
name="last_time"
labelAlign="left"
className="form-item"
className="form-item yisa-search"
>
<RangePicker
defaultValue={[moment(formData.start), moment(formData.end)]}
@ -632,17 +633,13 @@ function InvoiceConf() {
/>
</Form.Item>
<Form.Item>
<Form.Item className="btnBox" layout="inline">
<Button type="primary" className="search-btn btn" icon={<SearchOutlined />} onClick={() => { getSearchData() }}>
搜索
</Button>
</Form.Item>
<Form.Item>
<Button type="primary" className="reset-btn btn" onClick={() => { getResetData() }}>
条件重置
</Button>
</Form.Item>
<Form.Item>
<Button type="primary" className="create-btn btn" onClick={() => { createData() }}>
创建用户
</Button>
@ -650,12 +647,14 @@ function InvoiceConf() {
</Form>
</div>
</div>
<div className="table-content">
<Table
columns={columns}
className="table"
pagination={false}
dataSource={tableData}
loading={loading}
scroll={{ y: "calc(100vh - 280px)" }}
></Table>
<Pagination
className="pagination-common"
@ -675,7 +674,8 @@ function InvoiceConf() {
onChange={changePn}
onShowSizeChange={changeLength}
/>
</> :
</div>
</div> :
''
}

91
src/pages/MerchantMgm/MerchantInfo/index.scss

@ -5,31 +5,63 @@ $color-text : var(--color-text);
$color-primary : var(--color-primary);
#MerchantInfo {
height: 100%;
.merchant-info-table {
display: flex;
height: 100%;
padding-top: 10px;
.panel {
display: block;
width: 375px;
padding: 0 10px 20px 20px;
background: transparent;
.title {
width: 100%;
// height: 100px;
padding-top: 20px;
padding-left: 20px;
background: none;
font-size: 16px;
font-family: Microsoft YaHei, Microsoft YaHei-Bold;
font-weight: 700;
text-align: left;
color: var(--color-text);
margin-bottom: 10px;
}
.panel-1 {
display: flex;
>.ant-form-inline {
display: block;
.ant-form-item-row {
flex: 1;
.ant-input-group {
display: flex;
.ant-input-group-addon {
width: 120px;
margin-right: 10px;
}
}
.ant-form-item-control {
flex: 1;
}
}
}
.yisa-search {
display: flex;
flex-basis: fit-content;
align-items: center;
width: 288px;
margin: 10px 5px;
margin: 10px 0;
label {
display: inline-block;
width: 120px;
text-align: right;
margin-right: 10px;
}
.yisa-cascader {
width: 100px;
width: 120px;
background: transparent;
border-color: var(--color-border);
}
.yisa-select {
width: 190px;
// width: 190px;
.ant-select-selector {
background: transparent;
@ -39,7 +71,7 @@ $color-primary : var(--color-primary);
}
.form-input {
width: 190px;
// width: 190px;
background: transparent;
border-color: var(--color-border);
}
@ -61,10 +93,17 @@ $color-primary : var(--color-primary);
.btnBox {
display: flex;
margin-top: 20px;
align-items: center;
margin-right: 0;
.ant-form-item-control-input-content {
display: flex;
justify-content: space-between;
}
.btn {
margin: 0 5px;
width: 110px;
height: 36px;
// margin: 0 5px;
border-radius: 5px;
border: none;
}
@ -84,14 +123,21 @@ $color-primary : var(--color-primary);
}
}
}
}
.table-content {
flex: 1;
padding-bottom: 15px;
padding: 20px;
background: var(--color-user-list-bg);
border-top-left-radius: 20px;
box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.08);
.table {
width: 98%;
margin: 15px 10px 10px 15px;
width: 100%;
max-height: calc(100% - 50px);
.ant-table-body {
@include scrollBar(var(--color-user-list-bg), #3B97FF);
}
.ant-table-thead {
th {
padding: 0px 16px;
@ -162,6 +208,8 @@ $color-primary : var(--color-primary);
}
}
}
}
}
.scheduleBtn {
background: #409eff;
@ -172,8 +220,9 @@ $color-primary : var(--color-primary);
}
#create {
height: 800px;
height: 100%;
overflow-y: scroll;
@include scrollBar(var(--color-user-list-bg), #3B97FF);
.create-form {
.ant-form-item-label{
@ -352,9 +401,9 @@ $color-primary : var(--color-primary);
}
#check {
height: 800px;
height: 100%;
overflow-y: scroll;
@include scrollBar(var(--color-user-list-bg), #3B97FF);
.check-form {
.btns {
display: flex;

14
src/pages/MerchantMgm/MerchantInfo/loadable.jsx

@ -766,8 +766,9 @@ function MerchantInfo() {
<div id="MerchantInfo" >
{
!createVisible && !updateVisible && !checkVisible ?
<>
<div className="merchant-info-table">
<div className="panel">
<div className="title">查询条件</div>
<div className="panel-1">
<Form
form={searchForm}
@ -853,10 +854,10 @@ function MerchantInfo() {
className="btnBox"
layout="inline"
>
<Button type="primary" className="search-btn btn" icon={<SearchOutlined />} onClick={() => { getSearchData() }}>
<Button type="primary" className="search-btn btn color-btn" icon={<SearchOutlined />} onClick={() => { getSearchData() }}>
搜索
</Button>
<Button type="primary" className="reset-btn btn" onClick={() => { getResetData() }}>
<Button type="primary" className="reset-btn btn color-reset" onClick={() => { getResetData() }}>
条件重置
</Button>
<Button type="primary" className="create-btn btn" onClick={() => { createData() }}>
@ -866,13 +867,15 @@ function MerchantInfo() {
</Form>
</div>
</div>
<div className="table-content">
<Table
columns={columns}
className="table"
pagination={false}
dataSource={tableData}
loading={loading}
rowKey={(record) => record.id}
scroll={{ y: "calc(100vh - 280px)" }}
></Table>
<Pagination
className="pagination-common"
@ -892,7 +895,8 @@ function MerchantInfo() {
onChange={changePn}
onShowSizeChange={changeLength}
/>
</> : ''
</div>
</div> : ''
}
{

Loading…
Cancel
Save