feats

src/components/QueryTable/index.jsx

@@ -0,0 +1,36 @@
+import React, { useState, useRef, useImperativeHandle } from 'react'
+import Search from '@/components/Search'
+import TableList from '@/components/TableList'
+
+export default React.forwardRef((props, ref) => {
+  const tableRef = useRef()
+  const [searchData, setSearchData] = useState({})
+  const {api, searchFields, onPageChange, ...leftProps} = props
+  const handleSearch = (data) => setSearchData(data)
+
+  useImperativeHandle(ref, () => ({
+    reload: () => {
+      if (tableRef.current) {
+        tableRef.current.reload()
+      }
+    },
+  }))
+
+  return (
+    <>
+      <Search
+        fields={searchFields}
+        onSearch={handleSearch}
+        onReset={handleSearch}
+      />
+
+      <TableList
+        ref={tableRef}
+        api={api}
+        params={searchData}
+        {...leftProps}
+        onPageChange={onPageChange}
+      />
+    </>
+  )
+})

src/components/Search/Field.jsx

@@ -5,7 +5,12 @@ const Option = Select.Option
 const { RangePicker } = DatePicker
 
 export default (props) => {
-  const { style, type, value, options = [], placeholder, onChange } = props
+  const { style, type, value, options = [], placeholder, render, onChange } = props
+
+  if (typeof render === 'function') {
+    const Element = render()
+    return React.cloneElement(Element, { value, onChange })
+  }
 
   const handleChange = (e) => {
     const isInput = !type || type === 'text' || type === 'input'
@@ -20,7 +25,7 @@ export default (props) => {
       )
     case 'select':
       return (
-        <Select style={style || {width: 120}} placeholder={placeholder} value={value} onChange={handleChange}>
+        <Select style={style || {width: 160}} placeholder={placeholder} value={value} onChange={handleChange}>
           {
             options.map((item) => <Option key={item.value} value={item.value}>{item.label}</Option>)
           }

src/components/SelectButton/AreaSelect.jsx

@@ -0,0 +1,63 @@
+import React, { useState, useEffect } from 'react';
+import { Select } from 'antd';
+
+import request from '../../utils/request'
+
+const { Option } = Select;
+
+/**
+ *
+ *
+ * @param {*} props
+ * @returns
+ */
+const CitySelect = (props) => {
+  const [ data, setData ] = useState([])
+  const cityId = typeof props.cityId === 'function' ? props.cityId() : props.cityId
+
+  useEffect(() => {
+    getCityAreaList();
+    getValue();
+  },[cityId])
+
+  const getCityAreaList = (e) => {
+    request({
+        url: '/api/admin/tdCityList/tdAreaCity',
+        method: 'GET',
+        params: {leveltype: 3, cityId},
+        action: 'select',
+    }).then((data) => {
+        setData(data)
+    })
+  }
+
+  /**
+   * 因为 有个需求是，如果这个城市被删除了，那么就直接展示为空，不能展示 cityId
+   */
+  const getValue = () => {
+    if (props.value) {
+      const tempData = data.filter(f => f.id == props.value)
+      const va = (tempData.length > 0) ? props.value : undefined
+      props.onChange(va)
+    }
+  }
+
+  return (
+      <Select
+      {...props}
+      showSearch
+      value={props.value}
+      style={{ width: '300px' }}
+      placeholder="请选择区域"
+      onChange={props.onChange}
+      filterOption={(input, option) =>
+        option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
+      }
+      >
+          {data.map(city => (
+            <Option key={city.id} value={city.name}>{city.name}</Option>
+          ))}
+      </Select>
+  )
+}
+export default CitySelect

src/components/SelectButton/BuildSelect.jsx

@@ -0,0 +1,65 @@
+import React, { useState, useEffect, useRef } from 'react';
+import { Select } from 'antd';
+import apis from '../../services/apis';
+import request from '../../utils/request'
+
+const { Option } = Select;
+
+function usePrevious(props) {
+  const ref = useRef();
+  useEffect(() => {
+    ref.current = props;
+  });
+  return ref.current;
+}
+
+/**
+ *
+ *
+ * @param {*} props
+ * @returns
+ */
+const BuildingSelect = props => {
+  const [data, setData] = useState([])
+  const [value, setValue] = useState([])
+  useEffect(() => {
+    getBuildList();
+  }, [props.value])
+
+
+  const getBuildList = e => {
+    request({ ...apis.building.buildingSelect, params: { pageNum: 1, pageSize: 999 } }).then(data => {
+        setData(data)
+        checkValue(data)
+        // 默认选中第一个
+    })
+  }
+
+
+  const checkValue = (data) => {
+    if (props.value) {
+      const tempData = data.filter(f => f.buildingId == props.value)
+      const va = (tempData.length > 0) ? props.value : '项目已下线，请重新选择项目'
+      props.onChange(va)
+
+    }
+  }
+
+  return (
+      <Select
+      showSearch
+      value={props.value}
+      style={{ width: '300px' }}
+      placeholder="请选择项目"
+      onChange={props.onChange}
+      filterOption={(input, option) =>
+        option.props.children && option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
+      }>
+          <Option key="" value="">全部项目</Option>
+          {data.map(building => (
+            <Option key={building.buildingId} value={building.buildingId}>{building.buildingName}</Option>
+          ))}
+      </Select>
+  )
+}
+export default BuildingSelect

src/components/SelectButton/BuildSelect2.jsx

@@ -0,0 +1,77 @@
+import React, { useState, useEffect, useRef } from 'react';
+import { Select } from 'antd';
+import apis from '../../services/apis';
+import request from '../../utils/request'
+
+const { Option } = Select;
+
+function usePrevious(props) {
+  const ref = useRef();
+  useEffect(() => {
+    ref.current = props;
+  });
+  return ref.current;
+}
+
+/**
+ *
+ *
+ * @param {*} props
+ * @returns
+ */
+const BuildingSelect2 = props => {
+  const [data, setData] = useState([])
+  const [value, setValue] = useState([])
+  console.log('props', props.cityId);
+  useEffect(() => {
+    getBuildList();
+  }, [props.cityId])
+
+
+  const getBuildList = e => {
+    request({ ...apis.building.buildingSelect, params: { cityId: props.cityId, pageNum: 1, pageSize: 999 } }).then(data => {
+      setData(data)
+      checkValue(data)
+      // 默认选中第一个
+    })
+  }
+
+
+  const checkValue = (data) => {
+    if (props.value) {
+      const tempData = data.filter(f => f.buildingId == props.value)
+      const va = (tempData.length > 0) ? props.value : '项目已下线，请重新选择项目'
+      props.onChange(va)
+
+    }
+  }
+
+  const onChange = (buildingId) => {
+    const building = data.filter(x => buildingId === x.buildingId)[0]
+
+    props.onChange(buildingId, building)
+    // if (props.value) {
+    //   const tempData = data.filter(f => f.buildingId == props.value)
+    //   const va = (tempData.length > 0) ? props.value : '项目已下线，请重新选择项目'
+    //   props.onChange(va)
+
+    // }={props.onChange}building.buildingId
+  }
+
+  return (
+    <Select
+      showSearch
+      value={props.value}
+      style={{ width: '300px' }}
+      placeholder="请选择项目"
+      onChange={ onChange}
+      filterOption={(input, option) =>
+        option.props.children && option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
+      }>
+      {data.map(building => (
+        <Option key={building.buildingId} value={building.buildingId}>{building.buildingName}</Option>
+      ))}
+    </Select>
+  )
+}
+export default BuildingSelect2

src/components/SelectButton/CitySelect.jsx

@@ -0,0 +1,62 @@
+import React, { useState, useEffect } from 'react';
+import { Select } from 'antd';
+
+import request from '../../utils/request'
+
+const { Option } = Select;
+
+/**
+ *
+ *
+ * @param {*} props
+ * @returns
+ */
+const CitySelect = (props) => {
+  const [ data, setData ] = useState([])
+
+  useEffect(() => {
+    getCityList();
+    getValue();
+  },[props.value])
+
+  const getCityList = (e) => {
+    request({
+        url: '/api/admin/tdCityList/tdCity',
+        method: 'GET',
+        params: {leveltype: 2, pageNum: 1,pageSize: 999},
+        action: 'select',
+    }).then((data) => {
+        setData(data)
+    })
+  }
+
+  /**
+   * 因为 有个需求是，如果这个城市被删除了，那么就直接展示为空，不能展示 cityId
+   */
+  const getValue = () => {
+    if (props.value) {
+      const tempData = data.filter(f => f.id == props.value)
+      const va = (tempData.length > 0) ? props.value : undefined
+      props.onChange(va)
+    }
+  }
+
+  return (
+      <Select
+      style={{ width: '300px' }}
+      placeholder="请选择城市"
+      showSearch
+      {...props}
+      value={props.value}
+      onChange={props.onChange}
+      filterOption={(input, option) =>
+        option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
+      }
+      >
+          {data.map(city => (
+            <Option key={city.id} value={city.id}>{city.name}</Option>
+          ))}
+      </Select>
+  )
+}
+export default CitySelect

src/components/SelectButton/CitySelect2.jsx

@@ -0,0 +1,63 @@
+import React, { useState, useEffect } from 'react';
+import { Select } from 'antd';
+
+import request from '../../utils/request'
+
+const { Option } = Select;
+
+/**
+ *
+ *
+ * @param {*} props
+ * @returns
+ */
+const CitySelect = (props) => {
+  const [ data, setData ] = useState([])
+
+  useEffect(() => {
+    getCityList();
+  },[props.value])
+
+  const getCityList = (e) => {
+    request({
+        url: '/api/admin/tdCityList/tdCity',
+        method: 'GET',
+        params: {leveltype: 2, pageNum: 1,pageSize: 999},
+        action: 'select',
+    }).then((data) => {
+        setData(data)
+        getValue(data);
+        console.log('---123---')
+    })
+  }
+
+  /**
+   * 因为 有个需求是，如果这个城市被删除了，那么就直接展示为空，不能展示 cityId
+   */
+  const getValue = (data) => {
+    console.log(props.value)
+    if (props.value) {
+      const tempData = data.filter(f => f.id == props.value)
+      const va = (tempData.length > 0) ? props.value : undefined
+      props.onChange(va)
+    }
+  }
+
+  return (
+      <Select
+      showSearch
+      value={props.value}
+      style={{ width: '180px' }}
+      placeholder="请选择城市"
+      onChange={props.onChange}
+      filterOption={(input, option) =>
+        option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
+      }
+      >
+          {data.map(city => (
+            <Option key={city.id} value={city.id}>{city.name}</Option>
+          ))}
+      </Select>
+  )
+}
+export default CitySelect

src/components/SelectButton/CitySelect3.jsx

@@ -0,0 +1,62 @@
+import React, { useState, useEffect } from 'react';
+import { Select } from 'antd';
+
+import request from '../../utils/request'
+
+const { Option } = Select;
+
+/**
+ *
+ *
+ * @param {*} props
+ * @returns
+ */
+const CitySelect3 = (props) => {
+  const [ data, setData ] = useState([])
+  console.log('props', props.buildingId)
+  useEffect(() => {
+    getCityList();
+    getValue();
+  },[props.buildingId])
+
+  const getCityList = (e) => {
+    request({
+        url: '/api/admin/tdCityList/tdCity',
+        method: 'GET',
+        params: {leveltype: 2, pageNum: 1,pageSize: 999},
+        action: 'select',
+    }).then((data) => {
+        setData(data)
+    })
+  }
+
+  /**
+   * 因为 有个需求是，如果这个城市被删除了，那么就直接展示为空，不能展示 cityId
+   */
+  const getValue = () => {
+    if (props.value) {
+      const tempData = data.filter(f => f.id == props.value)
+      const va = (tempData.length > 0) ? props.value : undefined
+      props.onChange(va)
+    }
+  }
+
+  return (
+      <Select
+      {...props}
+      showSearch
+      value={props.value}
+      style={{ width: '300px' }}
+      placeholder="请选择城市"
+      onChange={props.onChange}
+      filterOption={(input, option) =>
+        option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
+      }
+      >
+          {data.map(city => (
+            <Option key={city.id} value={city.id}>{city.name}</Option>
+          ))}
+      </Select>
+  )
+}
+export default CitySelect3

src/components/SelectButton/LivePlatSelect.jsx

@@ -0,0 +1,65 @@
+import React, { useState, useEffect, useRef } from 'react';
+import { Select } from 'antd';
+import apis from '../../services/apis';
+import request from '../../utils/request'
+
+const { Option } = Select;
+
+function usePrevious(props) {
+  const ref = useRef();
+  useEffect(() => {
+    ref.current = props;
+  });
+  return ref.current;
+}
+
+/**
+ *
+ *
+ * @param {*} props
+ * @returns
+ */
+const LivePlatSelect = props => {
+  const [data, setData] = useState([])
+  const [value, setValue] = useState([])
+
+  useEffect(() => {
+    getLivePlatList();
+  }, [props.value])
+
+
+  const getLivePlatList = e => {
+    request({ ...apis.taliveActivity.livePlatList, params: { pageNum: 1, pageSize: 999 } }).then(data => {
+        setData(data)
+        checkValue(data)
+        // 默认选中第一个
+    })
+  }
+
+
+  const checkValue = (data) => {
+    if (props.value) {
+      const tempData = data.filter(f => f.id == props.value)
+      const va = (tempData.length > 0) ? props.value : '平台已下线，请重新选择'
+      props.onChange(va)
+
+    }
+  }
+
+  return (
+      <Select
+      showSearch
+      value={`${props.value || ''}`}
+      style={{ width: '300px' }}
+      placeholder="请选择平台"
+      onChange={props.onChange}
+      filterOption={(input, option) =>
+        option.props.children && option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
+      }>
+          {data.map(live => (
+            <Option key={live.id} value={`${live.id}`}>{live.livePlatName}</Option>
+          ))}
+      </Select>
+  )
+}
+export default LivePlatSelect

src/components/SelectButton/MiniappIconSelect.jsx

@@ -0,0 +1,64 @@
+import React, { useState, useEffect, useRef } from 'react';
+import { Select } from 'antd';
+import apis from '../../services/apis';
+import request from '../../utils/request'
+
+const { Option } = Select;
+
+function usePrevious(props) {
+  const ref = useRef();
+  useEffect(() => {
+    ref.current = props;
+  });
+  return ref.current;
+}
+
+/**
+ *
+ *
+ * @param {*} props
+ * @returns
+ */
+const MiniappIconSelect = props => {
+  const [data, setData] = useState([])
+  const [value, setValue] = useState([])
+  useEffect(() => {
+    getMiniappIconSelect();
+  }, [props.value])
+
+
+  const getMiniappIconSelect = e => {
+    request({ ...apis.icon.minippIconList, params: { pageNum: 1, pageSize: 999 } }).then(data => {
+        setData(data)
+        checkValue(data)
+        // 默认选中第一个
+    })
+  }
+
+
+  const checkValue = (data) => {
+    if (props.value) {
+      const tempData = data.filter(f => f.iconCode == props.value)
+      const va = (tempData.length > 0) ? props.value : ''
+      props.onChange(va)
+
+    }
+  }
+
+  return (
+      <Select
+      showSearch
+      value={props.value}
+      style={{ width: '300px' }}
+      placeholder="请选择功能"
+      onChange={props.onChange}
+      filterOption={(input, option) =>
+        option.props.children && option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
+      }>
+          {data.map(icon => (
+            <Option key={icon.iconCode} value={icon.iconCode}>{icon.iconName}</Option>
+          ))}
+      </Select>
+  )
+}
+export default MiniappIconSelect

src/components/SelectButton/NewTypeSelect.jsx

@@ -0,0 +1,60 @@
+import React, { useState, useEffect, useRef } from 'react';
+import { Select } from 'antd';
+
+import request from '../../utils/request'
+
+const { Option } = Select;
+
+function usePrevious(props) {
+  const ref = useRef();
+  useEffect(() => {
+    ref.current = props;
+  });
+  return ref.current;
+}
+
+/**
+ *
+ *
+ * @param {*} props
+ * @returns
+ */
+const NewsTypeSelect = (props) => {
+  const [ data, setData ] = useState([])
+  const [ value, setValue ] = useState('')
+  const preProps = usePrevious(props)
+  
+  if ((!preProps || !preProps.value) && props.value && !value) {
+    setValue(props.value)
+  }
+
+  useEffect(() => {
+    getNewsTypeList();
+  },[props.buildingId])
+
+  const getNewsTypeList = (e) => {
+    request({
+        url: '/api/admin/taNewsType',
+        method: 'GET',
+        params: {pageNum: 1,pageSize: 999,buildingId: props.buildingId},
+        action: 'admin.taNewsType.get',
+    }).then((data) => {
+        setData(data.records)
+    })
+  }
+
+  const handleChange = (e) => {
+    setValue(e)
+    props.onChange(e)
+  }
+
+  return (
+      <Select value={props.value} style={{ width: '180px' }} placeholder="请选择资讯类型" onChange={handleChange}>
+          {data.map(type => (
+            <Option key={type.newsTypeId} value={type.newsTypeId}>{type.newsTypeName}</Option>
+          ))}
+      </Select>
+  )
+}
+export default NewsTypeSelect
+

src/components/SelectButton/QrcodeType.jsx

@@ -0,0 +1,82 @@
+import React, { useMemo } from 'react';
+import { Select } from 'antd';
+
+const { Option } = Select;
+
+
+const qrcodeType = props => {
+    //   const [data, setData] = useState([])
+    //   useEffect(() => {
+
+    //   }, [props.value])
+    // const visible2 = props.visible || true
+    const all = props.all || false
+
+    const visible = useMemo(() => (props.visible), [props.visible]);
+    
+    const data = [
+        {
+            name: '项目',
+            value: 'project',
+            visible,
+        },
+        {
+            name: '报名活动',
+            value: 'activity',
+            visible,
+        },
+        {
+            name: '助力活动',
+            value: 'help',
+            visible,
+        },
+        {
+            name: '拼团活动',
+            value: 'group',
+            visible,
+        },
+        {
+            name: 'H5活动',
+            value: 'h5',
+            visible: true,
+        },
+        {
+            name: '直播活动',
+            value: 'live',
+            visible: true,
+        },
+        {
+            name: '资讯',
+            value: 'news',
+            visible,
+        },
+        {
+            name: '在线选房',
+            value: 'salesBatch',
+            visible,
+        },
+    ]
+
+
+    return (
+        // <>234</>
+        <Select
+            showSearch
+            value={props.value}
+            style={{ width: '250px' }}
+            placeholder="请选择二维码内容类型"
+            onChange={props.onChange}
+            // filterOption={(input, option) =>
+            //     // eslint-disable-next-line max-len
+            //     option.props.children && option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
+            // }
+        >
+            {all && <Option key="" value="">全部类型</Option>}
+            {data.map(Item => (
+
+                Item.visible ? <Option key={Item.vlaue} value={Item.value}> {Item.name} </Option> : ''
+            ))}
+        </Select>
+    )
+}
+export default qrcodeType

src/components/SelectButton/QrcodeType1.jsx

@@ -0,0 +1,82 @@
+import React, { useMemo } from 'react';
+import { Select } from 'antd';
+
+const { Option } = Select;
+
+
+const qrcodeType = props => {
+    //   const [data, setData] = useState([])
+    //   useEffect(() => {
+
+    //   }, [props.value])
+    // const visible2 = props.visible || true
+    const all = props.all || false
+
+    const visible = useMemo(() => (props.visible), [props.visible]);
+    
+    const data = [
+        {
+            name: '项目',
+            value: 'building',
+            visible,
+        },
+        {
+            name: '报名活动',
+            value: 'activity',
+            visible,
+        },
+        {
+            name: '助力活动',
+            value: 'help',
+            visible,
+        },
+        {
+            name: '拼团活动',
+            value: 'group',
+            visible,
+        },
+        {
+            name: 'H5活动',
+            value: 'h5',
+            visible: true,
+        },
+        {
+            name: '直播活动',
+            value: 'live',
+            visible: true,
+        },
+        {
+            name: '资讯',
+            value: 'news',
+            visible,
+        },
+        {
+            name: '在线选房',
+            value: 'house',
+            visible,
+        },
+    ]
+
+
+    return (
+        // <>234</>
+        <Select
+            showSearch
+            value={props.value}
+            style={{ width: '250px' }}
+            placeholder="请选择二维码内容类型"
+            onChange={props.onChange}
+            // filterOption={(input, option) =>
+            //     // eslint-disable-next-line max-len
+            //     option.props.children && option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
+            // }
+        >
+            {all && <Option key="" value="">全部类型</Option>}
+            {data.map(Item => (
+
+                Item.visible ? <Option key={Item.vlaue} value={Item.value}> {Item.name} </Option> : ''
+            ))}
+        </Select>
+    )
+}
+export default qrcodeType

src/components/SelectButton/WxDictSelect.jsx

@@ -0,0 +1,45 @@
+import React, { useState, useEffect, useRef } from 'react';
+import { Select } from 'antd';
+import apis from '../../services/apis';
+import request from '../../utils/request'
+
+const { Option } = Select;
+
+/**
+ *
+ *
+ * @param {*} props
+ * @returns
+ */
+const WxDictSelect = props => {
+  const [data, setData] = useState([])
+  const [value, setValue] = useState([])
+  useEffect(() => {
+    getWxDictList();
+  }, [props.value])
+
+
+  const getWxDictList = e => {
+    request({ ...apis.wxDict.list, params: { pageNumber: 1, pageSize: 999 } }).then(data => {
+        setData(data.records)
+        // 默认选中第一个
+    })
+  }
+
+  return (
+      <Select
+      showSearch
+      value={props.value}
+      style={{ width: '250px' }}
+      placeholder="请选择用户来源"
+      onChange={props.onChange}
+      filterOption={(input, option) =>
+        option.props.children && option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
+      }>
+          {data.map(wxDict => (
+            <Option key={wxDict.sceneType} value={wxDict.sceneType}>{wxDict.sceneAlias}</Option>
+          ))}
+      </Select>
+  )
+}
+export default WxDictSelect

src/components/SelectButton/channelSelect.jsx

@@ -0,0 +1,47 @@
+import React, { useState, useEffect, useMemo } from 'react';
+import { Select } from 'antd';
+import apis from '../../services/apis';
+import request from '../../utils/request'
+
+const { Option } = Select;
+
+/**
+ *
+ *
+ * @param {*} props
+ * @returns
+ */
+const ChannelSelect = props => {
+  const [data, setData] = useState([])
+  useEffect(() => {
+    getChannelSelect();
+  }, [props.value])
+
+  const all = props.all || false
+
+
+  const getChannelSelect = e => {
+    request({ ...apis.channelList.getList, params: { pageNumber: 1, pageSize: 999 } }).then(data => {
+      setData(data.channelNmae)
+      // 默认选中第一个
+    })
+  }
+
+  return (
+    <Select
+      showSearch
+      value={props.value}
+      style={{ width: '250px' }}
+      placeholder="请选择渠道"
+      onChange={props.onChange}
+      filterOption={(input, option) =>
+        option.props.children && option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
+      }>
+      {all && <Option key="" value="">全部渠道</Option>}
+      {data.map(Item => (
+        <Option key={Item.channelId} value={Item.channelId}> {Item.channelName} </Option>
+      ))}
+    </Select>
+  )
+}
+export default ChannelSelect

src/components/TableList/index.jsx

@@ -1,15 +1,15 @@
-import { useCallback, useState, useEffect } from 'react';
+import React, { useCallback, useState, useEffect, useImperativeHandle } from 'react';
 import { stringify } from 'querystring';
 import { notification } from 'antd';
 import request from '@/utils/request'
 import TableList from './TableList';
 import Pagination from './Pagination';
 
-export default (props) => {
+export default React.forwardRef((props, ref) => {
   const [loading, setLoading] = useState(false)
   const [pageConfig, setPageConfig] = useState({ current: 1, pageSize: 10, total: 0 })
   const [list, setList] = useState()
-  const { api, params = {}, ...tableProps } = props
+  const { api, params = {}, onPageChange, ...tableProps } = props
   const paramsStr = stringify({
     ...params,
     pageNum: pageConfig.current,
@@ -17,10 +17,16 @@ export default (props) => {
   })
 
   const updatePageConfig = useCallback((config) => {
-    setPageConfig({
+    const newPage = {
       ...pageConfig,
-      ...config
-    })
+      ...config,
+    }
+
+    setPageConfig(newPage)
+
+    if (onPageChange) {
+      onPageChange(newPage)
+    }
   }, [pageConfig])
 
   const handlePageChange = (current, pageSize) => {
@@ -28,20 +34,34 @@ export default (props) => {
     updatePageConfig(config)
   }
 
+  // 获取远程数据
+  const fetchData = useCallback(
+    () => {
+      const url = `${api.url}?${paramsStr}`
+      setLoading(true)
+      request({...api, url}).then((res) => {
+        const {current, total, records = []} = res
+        setLoading(false)
+        setList(records)
+        updatePageConfig({current, total})
+      }).catch((err) => {
+        console.error(err)
+        setLoading(false)
+        notification.warn({ message: err.message })
+      })
+    },
+    [paramsStr, api],
+  )
+
+  // 监控查询参数的修改
   useEffect(() => {
-    const url = `${api.url}?${paramsStr}`
-    setLoading(true)
-    request({...api, url}).then((res) => {
-      const {current, total, records = []} = res
-      setLoading(false)
-      setList(records)
-      updatePageConfig({current, total})
-    }).catch((err) => {
-      console.error(err)
-      setLoading(false)
-      notification.warn({ message: err.message })
-    })
-  }, [paramsStr, api])
+    fetchData()
+  }, [paramsStr])
+
+  // 透传给父组件部分方法
+  useImperativeHandle(ref, () => ({
+    reload: fetchData
+  }))
 
   return (
     <>
@@ -49,4 +69,4 @@ export default (props) => {
       <Pagination {...pageConfig} onChange={handlePageChange} />
     </>
   )
-};
+});

src/pages/building/List/components/Search.jsx

@@ -1,48 +0,0 @@
-import React from 'react'
-import Search from '@/components/Search'
-
-export default (props) => {
-  const searchFields = [
-    {
-      name: 'name',
-      label: '楼盘名称',
-      placeholder: '请输入楼盘名称',
-    },
-    {
-      name: 'buildingStatus',
-      label: '楼盘状态',
-      placeholder: '请选择楼盘状态',
-      type: 'select',
-      options: [
-        {label: '已发布', value: 1},
-        {label: '未发布', value: 2}
-      ]
-    },
-    {
-      name: 'buildingStatus',
-      label: '销售状态',
-      placeholder: '请选择销售状态',
-      type: 'select',
-      options: [
-        {label: '待售', value: '待售'},
-        {label: '在售', value: '在售'},
-        {label: '售罄', value: '售罄'},
-        {label: '在租', value: '在租'},
-      ]
-    },
-    {
-      name: 'isMain',
-      label: '首页推荐',
-      placeholder: '请选择首页推荐',
-      type: 'select',
-      options: [
-        {label: '推荐', value: 1},
-        {label: '未推荐', value: 2},
-      ]
-    },
-  ]
-
-  return (
-    <Search fields={searchFields} onSearch={props.onSearch} onReset={props.onSearch} />
-  )
-}

src/pages/building/List/components/Table.jsx

@@ -1,100 +0,0 @@
-import React, { useState } from 'react'
-import { router } from 'umi'
-import { Button, Badge } from 'antd'
-import moment from 'moment'
-import TableList from '@/components/TableList'
-import OperButton from '@/components/OperButton'
-import AuthButton from '@/components/AuthButton'
-import withActions from '@/components/ActionList'
-
-export default (props) => {
-  const [page, setPage] = useState({current: 1, pageSize: 10})
-  const { api, params, onDelete, onPublish } = props
-
-  const columns = [
-    {
-      title: '编号',
-      key: '#',
-      align: 'center',
-      render: (t, r, index) => (page.current - 1) * page.pageSize + index + 1,
-    },
-    {
-      title: '封面',
-      dataIndex: 'buildingListImg',
-      key: 'buildingListImg',
-      align: 'center',
-      render: (_, row) => {
-        if (row.buildingListImg && row.buildingListImg[0]) {
-          return <img src={row.buildingListImg[0].url} width={128} height={72} style={{borderRadius: '4px'}} alt="" />
-        }
-        return null
-      }
-    },
-    {
-      title: '楼盘名称',
-      dataIndex: 'buildingName',
-      key: 'buildingName',
-      align: 'center',
-      render: (t, row) => (
-        <AuthButton name="admin.building.update" noRight={t}>
-          <Button
-            type="link"
-            onClick={() => router.push({
-              pathname: '/building/list/add',
-              query: {
-                id: row.buildingId,
-              },
-            })}
-          >{t}</Button>
-        </AuthButton>
-      )
-    },
-    {
-      title: '销售状态',
-      dataIndex: 'marketStatus',
-      key: 'marketStatus',
-      align: 'center',
-    },
-    {
-      title: '录入时间',
-      dataIndex: 'createDate',
-      key: 'createDate',
-      align: 'center',
-      render: (t) => moment(t).format('YYYY-MM-DD HH:mm')
-    },
-    {
-      title: '状态',
-      dataIndex: 'status',
-      key: 'status',
-      align: 'center',
-      render: (t) => t === 1 ? <Badge status="success" text="已发布" /> : <Badge status="processing" text="未发布" />
-    },
-    {
-      title: '操作',
-      key: 'options',
-      align: 'center',
-      render: withActions((_, row) => [
-        <AuthButton name="admin.building.public" noRight={null}>
-          <OperButton onClick={() => onPublish(row)}>{row.status === 1 ? '取消发布' : '发布'}</OperButton>
-        </AuthButton>,
-        <AuthButton name="admin.building.delete" noRight={null}>
-          <OperButton.Confirm
-            title="确认删除?"
-            content="删除之后不可恢复"
-            onClick={() => onDelete(row)}
-          >删除</OperButton.Confirm>
-        </AuthButton>
-      ], {noMargin: true})
-    },
-  ]
-
-  return (
-    <TableList
-      api={api}
-      params={params}
-      rowKey="buildingId"
-      columns={columns}
-      onPageChange={(pg) => setPage(pg)}
-    />
-  )
-}

src/pages/building/List/index.jsx

@@ -1,28 +1,37 @@
-import React, { useState } from 'react'
+import React, { useMemo, useRef, useCallback, useState } from 'react'
 import apis from '@/services/apis'
-import Search from './components/Search'
-import Table from './components/Table'
+import QueryTable from '@/components/QueryTable'
+import getSearchFields from './searchFields'
+import getTableColumns from './tableColumns'
 
 export default (props) => {
-  const [searchData, setSearchData] = useState({})
-
-  const handleDelete = (row) => {
+  const ref = useRef()
+  const [page, setPage] = useState({current: 1, pageSize: 10})
+  const onPublish = useCallback((row) => {
     //
-  }
+  }, [])
+
+  const onDelete = useCallback((row) => {
 
-  const handlePublish = (row) => {
+  }, [])
 
-  }
+  const searchFields = useMemo(getSearchFields, [])
+  const tableColumns = useMemo(() => {
+    return getTableColumns({
+      page,
+      onPublish,
+      onDelete,
+    })
+  }, [page])
 
   return (
-    <div>
-      <Search onSearch={(data) => setSearchData(data)} />
-      <Table
-        api={apis.building.getList}
-        params={searchData}
-        onDelete={handleDelete}
-        onPublish={handlePublish}
-      />
-    </div>
+    <QueryTable
+      ref={ref}
+      rowKey="buildingId"
+      api={apis.building.getList}
+      searchFields={searchFields}
+      columns={tableColumns}
+      onPageChange={(pg) => setPage(pg)}
+    />
   )
 }

src/pages/building/List/searchFields.js

@@ -0,0 +1,47 @@
+import SelectCity from '@/components/SelectButton/CitySelect'
+
+export default () => [
+  {
+    name: 'cityId',
+    label: '城市',
+    placeholder: '请选择城市',
+    render: () => <SelectCity style={{width: 160}} />
+  },
+  {
+    name: 'name',
+    label: '楼盘名称',
+    placeholder: '请输入楼盘名称',
+  },
+  {
+    name: 'buildingStatus',
+    label: '楼盘状态',
+    placeholder: '请选择楼盘状态',
+    type: 'select',
+    options: [
+      {label: '已发布', value: 1},
+      {label: '未发布', value: 2}
+    ]
+  },
+  {
+    name: 'marketStatus',
+    label: '销售状态',
+    placeholder: '请选择销售状态',
+    type: 'select',
+    options: [
+      {label: '待售', value: '待售'},
+      {label: '在售', value: '在售'},
+      {label: '售罄', value: '售罄'},
+      {label: '在租', value: '在租'},
+    ]
+  },
+  {
+    name: 'isMain',
+    label: '首页推荐',
+    placeholder: '请选择首页推荐',
+    type: 'select',
+    options: [
+      {label: '推荐', value: 1},
+      {label: '未推荐', value: 2},
+    ]
+  },
+]

src/pages/building/List/tableColumns.js

@@ -0,0 +1,83 @@
+import { router } from 'umi'
+import { Button, Badge } from 'antd'
+import moment from 'moment'
+import OperButton from '@/components/OperButton'
+import AuthButton from '@/components/AuthButton'
+import withActions from '@/components/ActionList'
+
+export default ({page, onPublish, onDelete}) => [
+  {
+    title: '编号',
+    key: '#',
+    align: 'center',
+    render: (t, r, index) => (page.current - 1) * page.pageSize + index + 1,
+  },
+  {
+    title: '封面',
+    dataIndex: 'buildingListImg',
+    key: 'buildingListImg',
+    align: 'center',
+    render: (_, row) => {
+      if (row.buildingListImg && row.buildingListImg[0]) {
+        return <img src={row.buildingListImg[0].url} width={128} height={72} style={{borderRadius: '4px'}} alt="" />
+      }
+      return null
+    }
+  },
+  {
+    title: '楼盘名称',
+    dataIndex: 'buildingName',
+    key: 'buildingName',
+    align: 'center',
+    render: (t, row) => (
+      <AuthButton name="admin.building.update" noRight={t}>
+        <Button
+          type="link"
+          onClick={() => router.push({
+            pathname: '/building/list/add',
+            query: {
+              id: row.buildingId,
+            },
+          })}
+        >{t}</Button>
+      </AuthButton>
+    )
+  },
+  {
+    title: '销售状态',
+    dataIndex: 'marketStatus',
+    key: 'marketStatus',
+    align: 'center',
+  },
+  {
+    title: '录入时间',
+    dataIndex: 'createDate',
+    key: 'createDate',
+    align: 'center',
+    render: (t) => moment(t).format('YYYY-MM-DD HH:mm')
+  },
+  {
+    title: '状态',
+    dataIndex: 'status',
+    key: 'status',
+    align: 'center',
+    render: (t) => t === 1 ? <Badge status="success" text="已发布" /> : <Badge status="processing" text="未发布" />
+  },
+  {
+    title: '操作',
+    key: 'options',
+    align: 'center',
+    render: withActions((_, row) => [
+      <AuthButton name="admin.building.public" noRight={null}>
+        <OperButton onClick={() => onPublish(row)}>{row.status === 1 ? '取消发布' : '发布'}</OperButton>
+      </AuthButton>,
+      <AuthButton name="admin.building.delete" noRight={null}>
+        <OperButton.Confirm
+          title="确认删除?"
+          content="删除之后不可恢复"
+          onClick={() => onDelete(row)}
+        >删除</OperButton.Confirm>
+      </AuthButton>
+    ], {noMargin: true})
+  },
+]