fix: 修改门店筛选四级问题

src/pages/chainStoreManage/components/storeModal.jsx

@@ -187,6 +187,7 @@ const StoreModal = props => {
         getLazyAddr(info);
       } else {
         getAreaAddr(0);
+        setFormData({});
       }
     }
   }, [visible]);
@@ -247,7 +248,13 @@ const StoreModal = props => {
             rules: [{ required: true, type: 'array', message: '请选择店铺区域!' }],
             initialValue: formData.addr,
           })(
-            <Cascader ref={divDom} options={areaAddr} loadData={e => loadData(e)} changeOnSelect />,
+            <Cascader
+              ref={divDom}
+              options={areaAddr}
+              placeholder="请选择店铺区域"
+              loadData={e => loadData(e)}
+              changeOnSelect
+            />,
           )}
         </FormItem>
         <FormItem label="详细地址">

src/pages/chainStoreManage/data.js

-// import { Tag, Badge } from 'antd';
-import React from 'react';
-
 export const weeks = ['周日', '周一', '周二', '周三', '周四', '周五', '周六', '周日'];
 export const stateDesc = { 1: '启用', 0: '禁用' };
 

src/pages/chainStoreManage/index.jsx

-import React, { useState, useRef } from 'react';
-import { notification, Button, Modal, Statistic } from 'antd';
-import ProTable from '@ant-design/pro-table';
+import React, { useState, useRef, useEffect } from 'react';
+import { notification, Button, Form, Input, Cascader, Col, Row, Table, Pagination } from 'antd';
 import _ from 'lodash';
-import { searchList, apiEnableStore } from './services';
-import { stateDesc, weeks } from './data';
+import { searchList, apiEnableStore, apiAddrArea } from './services';
+import { stateDesc, weeks, layout } from './data';
 import StoreModal from './components/storeModal';
+import style from './style.less';
 
 export default () => {
   const [visible, setVisible] = useState(false);
   const [storeInfo, setStoreInfo] = useState({});
+  const [areaAddr, setAreaAddr] = useState([]);
+  const [dataList, setDataList] = useState([]);
+  const [pageNo, setPageNo] = useState(1);
+  const [totalNum, setTotalNum] = useState(0);
+  const [pageSize, setPageSize] = useState(20);
   const table = useRef();
+  const refSearch = useRef();
+  const divDom = useRef();
   const onEnableState = async ({ id, state }) => {
     const enable = +state === 1 ? 0 : 1;
     const res = await apiEnableStore({ id, state: enable });
@@ -34,6 +41,92 @@ export default () => {
     }
     setVisible(false);
   };
+
+  // 获取市区街道
+  const loadData = async selectedOptions => {
+    const targetOption = selectedOptions[selectedOptions.length - 1];
+    targetOption.loading = true;
+    const res = await apiAddrArea({
+      parentId: targetOption.value,
+    });
+    if (res) {
+      const children = res.map(item => ({
+        isLeaf: +item.addrLevel === 4,
+        loading: false,
+        label: item.addrName,
+        value: item.addrId,
+      }));
+      targetOption.loading = false;
+      if (children.length > 0) {
+        targetOption.children = children;
+      } else {
+        targetOption.isLeaf = true;
+        if (selectedOptions.length === 3) {
+          divDom.current.blur();
+        }
+      }
+      setAreaAddr([...areaAddr]);
+    }
+  };
+  const getAreaAddr = async id => {
+    const params = {};
+    if (id) {
+      params.parentId = id;
+    }
+    const res = await apiAddrArea(params);
+    if (res) {
+      const arr = res.map(item => ({
+        isLeaf: false,
+        loading: false,
+        label: item.addrName,
+        value: item.addrId,
+      }));
+      setAreaAddr(arr);
+      return arr;
+    }
+    return [];
+  };
+
+  const getList = async (params = {}) => {
+    const res = await searchList(Object.assign({ current: pageNo, pageSize }, params));
+    if (res && res.data && res.data.length) {
+      setDataList(res.data);
+    } else {
+      setDataList([]);
+    }
+    setTotalNum(res.total);
+  };
+
+  // 搜索
+  const onSearch = async val => {
+    const params = {};
+    if (val.name) {
+      params.name = val.name;
+    }
+    if (val.addr && val.addr.length) {
+      const ids = ['provinceId', 'cityId', 'countyId', 'townId'];
+      val.addr.forEach((item, i) => {
+        params[ids[i]] = item;
+      });
+    }
+    getList(params);
+  };
+
+  const onReset = () => {
+    if (refSearch.current && refSearch.current.resetFields) {
+      refSearch.current.resetFields();
+    }
+  };
+
+  const onPageChange = (e, size) => {
+    setPageNo(e);
+    setPageSize(size);
+  };
+
+  useEffect(() => {
+    getList();
+    getAreaAddr();
+  }, []);
   const columns = [
     {
       title: '门店名称',
@@ -55,12 +148,12 @@ export default () => {
         <div>
           <div>
             {businessHours.weeks.map(item => (
-              <span>{weeks[item]}</span>
+              <span key={item}>{weeks[item]}</span>
             ))}
           </div>
           <div>
             {businessHours.hoursItems.map(item => (
-              <div>
+              <div key={item.begin}>
                 <span>{item.begin}</span>-<span>{item.end}</span>
               </div>
             ))}
@@ -72,6 +165,7 @@ export default () => {
       title: '地区',
       dataIndex: 'addr',
       width: 200,
+      hideInSearch: true,
       render: (addr, r) => (
         <span>{`${r.provinceName}${r.cityName}${r.countyName}${r.townName || ''}`}</span>
       ),
@@ -109,10 +203,10 @@ export default () => {
       width: 170,
       fixed: 'right',
       render: (val, r) => [
-        <Button onClick={() => onEnableState(r)} type="primary">
+        <Button key="enable1" onClick={() => onEnableState(r)} type="primary">
           {+r.state ? '禁用' : '启用'}
         </Button>,
-        <Button style={{ marginLeft: '10px' }} onClick={() => onShowInfo(r)}>
+        <Button key="seek" style={{ marginLeft: '10px' }} onClick={() => onShowInfo(r)}>
           查看
         </Button>,
       ],
@@ -120,27 +214,62 @@ export default () => {
   ];
   return (
     <div>
-      <ProTable
-        columns={columns}
-        request={params => searchList(params, 1)}
-        rowKey={r => r.serviceNo}
-        pagination={{
-          pagesSize: 20,
-        }}
+      <div className={style.serachForm}>
+        <Form {...layout} ref={refSearch} onFinish={e => onSearch(e)} name="formData">
+          <Row gutter={24}>
+            <Col span={8}>
+              <Form.Item label="门店名称" name="name">
+                <Input placeholder="请输入门店名称" allowClear maxLength={20} />
+              </Form.Item>
+            </Col>
+            <Col span={8}>
+              <Form.Item label="地区" name="addr">
+                <Cascader
+                  ref={divDom}
+                  options={areaAddr}
+                  loadData={e => loadData(e)}
+                  changeOnSelect
+                />
+              </Form.Item>
+            </Col>
+            <Col span={8}>
+              <Button type="primary" htmlType="submit" size="middle">
+                搜索
+              </Button>
+              <Button size="middle" className={style.searchBtn} onClick={() => onReset()}>
+                重置
+              </Button>
+              <Button type="primary" size="middle" onClick={() => onCreate()}>
+                新建
+              </Button>
+            </Col>
+          </Row>
+        </Form>
+      </div>
+      <Table
+        dataSource={dataList}
         bordered
-        actionRef={table}
+        columns={columns}
+        rowKey={record => record.id}
+        pagination={false}
+        // className={styles.tabletop}
         scroll={{ x: '100%' }}
-        search={{
-          collapsed: false,
-          collapseRender: () => null,
-        }}
-        headerTitle="连锁门店管理"
-        toolBarRender={() => [
-          <Button key="button" type="primary" onClick={() => onCreate()}>
-            新建
-          </Button>,
-        ]}
+        // rowSelection={rowSelection}
       />
+      {dataList && dataList.length && (
+        <div className={style.pageBox}>
+          <Pagination
+            style={{ marginBottom: 10 }}
+            onChange={onPageChange}
+            total={totalNum}
+            showTotal={total => `共${total}条`}
+            current={pageNo}
+            pageSize={pageSize}
+            showSizeChanger
+            onShowSizeChange={onPageChange}
+          />
+        </div>
+      )}
       <StoreModal visible={visible} onCancel={closeModal} formInfo={storeInfo} />
     </div>
   );

src/pages/chainStoreManage/style.less

+.serachForm {
+  margin-bottom: 20px;
+  padding: 20px 50px 0 10px;
+  background-color: #fff;
+}
+.searchBtn {
+  margin: 0 10px;
+}
+.pageBox {
+  padding: 20px 20px 15px;
+  text-align: right;
+  background-color: #fff;
+  border: 1px solid #f0f0f0;
+  border-top: 0;
+}