优化样式、新增重置

src/pages/order/cost-of-sales/index.jsx

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import { PageContainer } from '@ant-design/pro-layout';
-import { Button, Card, DatePicker, Table, Pagination, Spin, Select, message } from 'antd';
+import { Button, Card, DatePicker, Table, Pagination, Spin, Select, message, Col, Row } from 'antd';
 import styles from './index.less';
 const { RangePicker } = DatePicker;
 import costSalesAPI from "./service";
@@ -144,6 +144,17 @@ export default function Index() {
         }
     }
 
+    //重置搜索条件
+    const onResetSearch = () => {
+        setGoodsIdArray([]);
+        setStoreIdArray([]);
+        setGoodsTypeArray([]);
+        setTimeRange([
+            moment(moment(new Date(Date.now() - 24 * 60 * 60 * 1000 * 7)).format('YYYY-MM-DD 00:00:00')),
+            moment(moment(new Date(Date.now())).format('YYYY-MM-DD 23:59:59')),
+        ]);
+    }
+
     useEffect(() => {
         onQueryReportSalescost();
         onQueryStoreList();
@@ -155,9 +166,14 @@ export default function Index() {
         <PageContainer>
             {showLoading ? <LoadingCard></LoadingCard> : null}
             <Card className={styles['data-search-card']}>
-                <div className={styles['data-search-box']}>
-                    <div className={styles['data-search-left']}>
+                <Row gutter={20} justify="space-between">
+                    <Col xs={24} sm={24} md={12} lg={12} xl={6} className={styles['data-search-item']}>
+                        <div className={styles['data-search-prefix']}>
+                            门店
+                        </div>
                         <Select
+                            className={styles['data-search-sufixx']}
+                            value={storeIdArray}
                             showSearch
                             mode="tags"
                             size="middle"
@@ -165,73 +181,80 @@ export default function Index() {
                             placeholder="请选择门店"
                             onChange={(values) => setStoreIdArray(values)}
                             filterOption={(input, option) => option.children.toLowerCase().includes(input.toLowerCase())}
-                            style={{
-                                width: '300px',
-                                marginRight: '50px'
-                            }}
                         >
                             {
-                                storeSelect.map( (item) => {
+                                storeSelect.map((item) => {
                                     return (
                                         <Option key={item.key}>{item.title}</Option>
                                     )
                                 })
                             }
                         </Select>
+                    </Col>
+                    <Col xs={24} sm={24} md={12} lg={12} xl={6} className={styles['data-search-item']}>
+                        <div className={styles['data-search-prefix']}>
+                            商品
+                        </div>
                         <Select
+                            className={styles['data-search-sufixx']}
                             showSearch
                             mode="tags"
                             size="middle"
                             allowClear
                             placeholder="请选择商品"
+                            value={goodsIdArray}
                             onChange={(values) => setGoodsIdArray(values)}
                             filterOption={(input, option) => option.children.toLowerCase().includes(input.toLowerCase())}
-                            style={{
-                                width: '300px',
-                                marginRight: '50px'
-                            }}
                         >
                             {
-                                goodsIdSelect.map( (item, index) => {
+                                goodsIdSelect.map((item, index) => {
                                     return (
                                         <Option key={item.id}>{item.name}</Option>
                                     )
                                 })
                             }
                         </Select>
+                    </Col>
+                    <Col xs={24} sm={24} md={12} lg={12} xl={6} className={styles['data-search-item']}>
+                        <div className={styles['data-search-prefix']}>
+                            商品类别
+                        </div>
                         <Select
+                            className={styles['data-search-sufixx']}
                             showSearch
                             mode="tags"
                             size="middle"
                             allowClear
                             placeholder="请选择商品类别"
+                            value={goodsTypeArray}
                             onChange={(values) => setGoodsTypeArray(values)}
                             filterOption={(input, option) => option.children.toLowerCase().includes(input.toLowerCase())}
-                            style={{
-                                width: '300px',
-                                marginRight: '50px'
-                            }}
                         >
                             {
-                                goodsTypeSelect.map( (item) => {
+                                goodsTypeSelect.map((item) => {
                                     return (
                                         <Option key={item.id}>{item.name}</Option>
                                     )
                                 })
                             }
                         </Select>
-                        <RangePicker size='middle' className={styles['my-range-picker']} value={timeRange} onChange={(date, dateStrings) => {
+                    </Col>
+                    <Col xs={24} sm={24} md={12} lg={12} xl={6} className={styles['data-search-item']}>
+                        <div className={styles['data-search-prefix']}>
+                            起始时间
+                        </div>
+                        <RangePicker size='middle' className={styles['data-search-sufixx']} value={timeRange} onChange={(date, dateStrings) => {
                             let tempDate = [
                                 moment(moment(new Date(dateStrings[0])).format('YYYY-MM-DD 00:00:00')),
                                 moment(moment(new Date(dateStrings[1])).format('YYYY-MM-DD 23:59:59')),
                             ]
                             setTimeRange(tempDate);
                         }} />
-                    </div>
-                    <div className={styles['data-search-btns']}>
-                        <Button className={styles['search-btn-item']}>重置</Button>
-                        <Button className={styles['search-btn-item']} type="primary" onClick={onQueryReportSalescost}>查询</Button>
-                    </div>
+                    </Col>
+                </Row>
+                <div className={styles['data-search-btns']}>
+                    <Button className={styles['search-btn-item']} onClick={onResetSearch}>重置</Button>
+                    <Button className={styles['search-btn-item']} type="primary" onClick={onQueryReportSalescost}>查询</Button>
                 </div>
             </Card>
             <Card className={styles['table-card']}>

src/pages/order/cost-of-sales/index.less

@@ -33,4 +33,30 @@
     bottom: 0;
     z-index: 999;
     background-color: rgba(0, 0, 0, 0.5);
+}
+
+.data-search-item {
+    display: flex;
+    align-items: center;
+    margin-bottom: 10px;
+}
+
+.data-search-input {
+    width: 100%;
+}
+
+.data-search-prefix {
+    text-align-last: justify;
+    width: 60px;
+    flex-shrink: 0;
+    margin-right: 5px;
+}
+
+.data-search-sufixx {
+    flex-grow: 1;
+}
+
+.data-search-btns {
+    display: flex;
+    justify-content: flex-end;
 }

src/pages/order/gross-profit-store-sales/index.jsx

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import { PageContainer } from '@ant-design/pro-layout';
-import { Button, Card, DatePicker, Table, Pagination, Spin, Select, message } from 'antd';
+import { Button, Card, DatePicker, Table, Pagination, Spin, Select, message, Col, Row } from 'antd';
 import styles from './index.less';
 const { RangePicker } = DatePicker;
 import costSalesAPI from "./service";
@@ -75,7 +75,7 @@ export default function Index() {
     /**
      * 查询店铺列表
      */
-     const onQueryStoreList = async () => {
+    const onQueryStoreList = async () => {
         setShowLoading(true);
         const response = await costSalesAPI.gettree({});
         setShowLoading(false);
@@ -92,6 +92,15 @@ export default function Index() {
         }
     }
 
+    //重置搜索条件
+    const onResetSearch = () => {
+        setStoreIdArray([]);
+        setTimeRange([
+            moment(moment(new Date(Date.now() - 24 * 60 * 60 * 1000 * 7)).format('YYYY-MM-DD 00:00:00')),
+            moment(moment(new Date(Date.now())).format('YYYY-MM-DD 23:59:59')),
+        ]);
+    }
+
     useEffect(() => {
         onQueryReportSalescost();
         onQueryStoreList();
@@ -101,9 +110,14 @@ export default function Index() {
         <PageContainer>
             {showLoading ? <LoadingCard></LoadingCard> : null}
             <Card className={styles['data-search-card']}>
-                <div className={styles['data-search-box']}>
-                    <div className={styles['data-search-left']}>
-                    <Select
+                <Row gutter={20} justify="start">
+                    <Col xs={24} sm={24} md={12} lg={12} xl={8} className={styles['data-search-item']}>
+                        <div className={styles['data-search-prefix']}>
+                            门店
+                        </div>
+                        <Select
+                            value={storeIdArray}
+                            className={styles['data-search-sufixx']}
                             showSearch
                             mode="tags"
                             size="middle"
@@ -111,32 +125,33 @@ export default function Index() {
                             placeholder="请选择门店"
                             onChange={(values) => setStoreIdArray(values)}
                             filterOption={(input, option) => option.children.toLowerCase().includes(input.toLowerCase())}
-                            style={{
-                                width: '300px',
-                                marginRight: '50px'
-                            }}
                         >
                             {
-                                storeSelect.map( (item) => {
+                                storeSelect.map((item) => {
                                     return (
                                         <Option key={item.key}>{item.title}</Option>
                                     )
                                 })
                             }
                         </Select>
-                        <RangePicker size='middle' className={styles['my-range-picker']} value={timeRange} onChange={(date, dateStrings) => {
+                    </Col>
+                    <Col xs={24} sm={24} md={12} lg={12} xl={8} className={styles['data-search-item']}>
+                        <div className={styles['data-search-prefix']}>
+                            起始时间
+                        </div>
+                        <RangePicker size='middle' className={styles['data-search-sufixx']} value={timeRange} onChange={(date, dateStrings) => {
                             let tempDate = [
                                 moment(moment(new Date(dateStrings[0])).format('YYYY-MM-DD 00:00:00')),
                                 moment(moment(new Date(dateStrings[1])).format('YYYY-MM-DD 23:59:59')),
                             ]
                             setTimeRange(tempDate);
                         }} />
-                    </div>
+                    </Col>
                     <div className={styles['data-search-btns']}>
-                        <Button className={styles['search-btn-item']}>重置</Button>
+                        <Button className={styles['search-btn-item']} onClick={onResetSearch}>重置</Button>
                         <Button className={styles['search-btn-item']} type="primary" onClick={onQueryReportSalescost}>查询</Button>
                     </div>
-                </div>
+                </Row>
             </Card>
             <Card className={styles['table-card']}>
                 <Table dataSource={costSalesData} columns={columns} pagination={false} />

src/pages/order/gross-profit-store-sales/index.less

@@ -33,4 +33,31 @@
     bottom: 0;
     z-index: 999;
     background-color: rgba(0, 0, 0, 0.5);
+}
+
+.data-search-item {
+    display: flex;
+    align-items: center;
+    margin-bottom: 10px;
+}
+
+.data-search-input {
+    width: 100%;
+}
+
+.data-search-prefix {
+    text-align-last: justify;
+    width: 60px;
+    flex-shrink: 0;
+    margin-right: 5px;
+}
+
+.data-search-sufixx {
+    flex-grow: 1;
+}
+
+.data-search-btns {
+    margin-left: auto;
+    display: flex;
+    justify-content: flex-end;
 }

src/pages/order/sales-gross-profit/index.jsx

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import { PageContainer } from '@ant-design/pro-layout';
-import { Button, Card, DatePicker, Table, Pagination, Spin, Select, message } from 'antd';
+import { Button, Card, DatePicker, Table, Pagination, Spin, Select, message, Col, Row } from 'antd';
 import styles from './index.less';
 const { RangePicker } = DatePicker;
 import costSalesAPI from "./service";
@@ -129,6 +129,17 @@ export default function Index() {
         }
     }
 
+    //重置搜索条件
+    const onResetSearch = () => {
+        setGoodsIdArray([]);
+        setStoreIdArray([]);
+        setGoodsTypeArray([]);
+        setTimeRange([
+            moment(moment(new Date(Date.now() - 24 * 60 * 60 * 1000 * 7)).format('YYYY-MM-DD 00:00:00')),
+            moment(moment(new Date(Date.now())).format('YYYY-MM-DD 23:59:59')),
+        ]);
+    }
+
     useEffect(() => {
         onQueryReportSalescost();
         onQueryStoreList();
@@ -139,9 +150,14 @@ export default function Index() {
         <PageContainer>
             {showLoading ? <LoadingCard></LoadingCard> : null}
             <Card className={styles['data-search-card']}>
-                <div className={styles['data-search-box']}>
-                    <div className={styles['data-search-left']}>
-                    <Select
+            <Row gutter={20} justify="space-between">
+                    <Col xs={24} sm={24} md={12} lg={12} xl={6} className={styles['data-search-item']}>
+                        <div className={styles['data-search-prefix']}>
+                            门店
+                        </div>
+                        <Select
+                            className={styles['data-search-sufixx']}
+                            value={storeIdArray}
                             showSearch
                             mode="tags"
                             size="middle"
@@ -149,73 +165,80 @@ export default function Index() {
                             placeholder="请选择门店"
                             onChange={(values) => setStoreIdArray(values)}
                             filterOption={(input, option) => option.children.toLowerCase().includes(input.toLowerCase())}
-                            style={{
-                                width: '300px',
-                                marginRight: '50px'
-                            }}
                         >
                             {
-                                storeSelect.map( (item) => {
+                                storeSelect.map((item) => {
                                     return (
                                         <Option key={item.key}>{item.title}</Option>
                                     )
                                 })
                             }
                         </Select>
+                    </Col>
+                    <Col xs={24} sm={24} md={12} lg={12} xl={6} className={styles['data-search-item']}>
+                        <div className={styles['data-search-prefix']}>
+                            商品
+                        </div>
                         <Select
+                            className={styles['data-search-sufixx']}
                             showSearch
                             mode="tags"
                             size="middle"
                             allowClear
                             placeholder="请选择商品"
+                            value={goodsIdArray}
                             onChange={(values) => setGoodsIdArray(values)}
                             filterOption={(input, option) => option.children.toLowerCase().includes(input.toLowerCase())}
-                            style={{
-                                width: '300px',
-                                marginRight: '50px'
-                            }}
                         >
                             {
-                                goodsIdSelect.map( (item, index) => {
+                                goodsIdSelect.map((item, index) => {
                                     return (
                                         <Option key={item.id}>{item.name}</Option>
                                     )
                                 })
                             }
                         </Select>
+                    </Col>
+                    <Col xs={24} sm={24} md={12} lg={12} xl={6} className={styles['data-search-item']}>
+                        <div className={styles['data-search-prefix']}>
+                            商品类别
+                        </div>
                         <Select
+                            className={styles['data-search-sufixx']}
                             showSearch
                             mode="tags"
                             size="middle"
                             allowClear
                             placeholder="请选择商品类别"
+                            value={goodsTypeArray}
                             onChange={(values) => setGoodsTypeArray(values)}
                             filterOption={(input, option) => option.children.toLowerCase().includes(input.toLowerCase())}
-                            style={{
-                                width: '300px',
-                                marginRight: '50px'
-                            }}
                         >
                             {
-                                goodsTypeSelect.map( (item) => {
+                                goodsTypeSelect.map((item) => {
                                     return (
                                         <Option key={item.id}>{item.name}</Option>
                                     )
                                 })
                             }
                         </Select>
-                        <RangePicker size='middle' className={styles['my-range-picker']} value={timeRange} onChange={(date, dateStrings) => {
+                    </Col>
+                    <Col xs={24} sm={24} md={12} lg={12} xl={6} className={styles['data-search-item']}>
+                        <div className={styles['data-search-prefix']}>
+                            起始时间
+                        </div>
+                        <RangePicker size='middle' className={styles['data-search-sufixx']} value={timeRange} onChange={(date, dateStrings) => {
                             let tempDate = [
                                 moment(moment(new Date(dateStrings[0])).format('YYYY-MM-DD 00:00:00')),
                                 moment(moment(new Date(dateStrings[1])).format('YYYY-MM-DD 23:59:59')),
                             ]
                             setTimeRange(tempDate);
                         }} />
-                    </div>
-                    <div className={styles['data-search-btns']}>
-                        <Button className={styles['search-btn-item']}>重置</Button>
-                        <Button className={styles['search-btn-item']} type="primary" onClick={onQueryReportSalescost}>查询</Button>
-                    </div>
+                    </Col>
+                </Row>
+                <div className={styles['data-search-btns']}>
+                    <Button className={styles['search-btn-item']} onClick={onResetSearch}>重置</Button>
+                    <Button className={styles['search-btn-item']} type="primary" onClick={onQueryReportSalescost}>查询</Button>
                 </div>
             </Card>
             <Card className={styles['table-card']}>

src/pages/order/sales-gross-profit/index.less

@@ -33,4 +33,30 @@
     bottom: 0;
     z-index: 999;
     background-color: rgba(0, 0, 0, 0.5);
+}
+
+.data-search-item {
+    display: flex;
+    align-items: center;
+    margin-bottom: 10px;
+}
+
+.data-search-input {
+    width: 100%;
+}
+
+.data-search-prefix {
+    text-align-last: justify;
+    width: 60px;
+    flex-shrink: 0;
+    margin-right: 5px;
+}
+
+.data-search-sufixx {
+    flex-grow: 1;
+}
+
+.data-search-btns {
+    display: flex;
+    justify-content: flex-end;
 }