过滤及下拉刷新

1c1e0e11 · peii · 71810a43 · 1c1e0e11 · 1c1e0e11 · 1c1e0e11
Commit 1c1e0e11 authored Dec 23, 2021 by peii
Showing with 194 additions and 41 deletions
app.json
app/containers/home/HomePage.js
src/components/form/common.tsx
src/components/form/index.styl
src/components/form/radio-filter.tsx
src/pages/settlement/collection.tsx
src/pages/settlement/components/list.styl
src/pages/settlement/components/list.tsx
src/pages/settlement/index.tsx
--- a/app.json
+++ b/app.json
 {
-  "name": "BoneHouse_Hospital_APP",
+  "name": "BoneHouse_Business_APP",
-  "displayName": "BoneHouse_Hospital_APP"
+  "displayName": "BoneHouse_Business_APP"
 }
\ No newline at end of file
--- a/app/containers/home/HomePage.js
+++ b/app/containers/home/HomePage.js
@@ -66,7 +66,7 @@ class HomePage extends Component {
          MOBILE_DISTRIBUTION_INVOICE_APPLICATION: {
            icon: require('../../images/quick_order.png'),
            title: '分销-开票申请',
-            page: 'QuickOrderPage',
+            page: '',
          },
          MOBILE_DISTRIBUTION_SETTLEMENT_GATHER: {
            icon: require('../../images/settle_gather.png'),
@@ -76,17 +76,17 @@ class HomePage extends Component {
          MOBILE_DISTRIBUTION_INVOICE_GATHER: {
            icon: require('../../images/quick_order.png'),
            title: '分销-开票汇总',
-            page: 'QuickOrderPage',
+            page: '',
          },
          MOBILE_DIRECT_INVOICE_APPLICATION: {
            icon: require('../../images/quick_order.png'),
            title: '直销-开票申请',
-            page: 'QuickOrderPage',
+            page: '',
          },
          MOBILE_DIRECT_INVOICE_GATHER: {
            icon: require('../../images/quick_order.png'),
            title: '直销-开票汇总',
-            page: 'QuickOrderPage',
+            page: '',
          },
        },
      },
@@ -130,7 +130,11 @@ class HomePage extends Component {
    }
  }
-  // 获取菜单权限
+  /**
+   * @description: 重新设置菜单
+   * @param {*}
+   * @return {*}
+   */
  getMenuRuleInfo() {
    let { functions } = this.props.userInfo
    let { menus, icons, tabs } = this.state
@@ -202,6 +206,9 @@ class HomePage extends Component {
  // 跳转页面
  jumpToSubpage(menu) {
    const page = menu.page
+    if (isBlank(page)) {
+      return show('该功能正在紧急开发暂未开放!')
+    }
    if ('LoginPage' === page) {
      this.props.exitLoginStatus()
    }

--- a/src/components/form/common.tsx
+++ b/src/components/form/common.tsx
+/*
+ * @FilePath: /BoneHouse_Business_APP/src/components/form/common.tsx
+ * @Author: peii
+ * @Date: 2021-12-21 10:19:25
+ * @LastEditTime: 2021-12-23 16:47:21
+ * @LastEditors: peii
+ * @Vision: 1.0
+ * @Description: 
+ */
+// @ts-nocheck
 import React, { Component } from 'react'
 import { View, Text, Image, TouchableOpacity, TextInput } from 'react-native'
-import { IFormField } from 'bonehouse'
 import { g, isRequired } from '../../utils/utils'
 import styles from './index.styl'
 export const Title = props => {
-  const { item } = props
+  const { item, style = {} } = props
  const required = isRequired(item)
  return (
-    <Text style={g(styles, 'form-label')}>
+    <Text style={[g(styles, 'form-label'), style]}>
      {!!required && <Text style={g(styles, 'red', 'pr5')}>*</Text>}
      <Text>{item.label}</Text>
    </Text>

--- a/src/components/form/index.styl
+++ b/src/components/form/index.styl
@@ -124,13 +124,13 @@
 .box
  &-item
-    flex-direction column
+    flex-direction row
    height auto
  &-radio
    @extend .row
    flex 1
-    justify-content flex-start
+    justify-content flex-end
    flex-wrap wrap
    margin-top 10px

--- a/src/components/form/radio-filter.tsx
+++ b/src/components/form/radio-filter.tsx
@@ -34,11 +34,11 @@ export default class BoxRadio extends Component<IProps> {
  }
  render() {
-    const { item, value, onChange, type = 'radio' } = this.props
+    const { item, value, onChange } = this.props
    return (
      <View style={g(styles, 'box-item')}>
-        <Title item={item} style={{ alignSelf: 'flex-left' }} />
+        <Title item={item} style={{ width: 'auto' }} />
        <View style={g(styles, 'box-radio')}>
          {item.options &&
@@ -51,8 +51,14 @@ export default class BoxRadio extends Component<IProps> {
                  key={option.value}
                  activeOpacity={0.8}
                  onPress={() => {
-                    if (value === option.value) return
+                    let values = isBlank(value) ? [] : R.split(',', value)
-                    onChange(item.field, option.value)
+                    if (active) {
+                      values = R.compose(R.remove(R.__, 1, values), R.findIndex(R.equals(option.value)))(values)
+                    } else {
+                      values = R.append(option.value, values)
+                    }
+                    onChange(item.field, values.join(','))
                  }}
                >
                  {active && (

--- a/src/pages/settlement/collection.tsx
+++ b/src/pages/settlement/collection.tsx
@@ -2,7 +2,7 @@
 * @FilePath: /BoneHouse_Business_APP/src/pages/settlement/collection.tsx
 * @Author: peii
 * @Date: 2021-12-18 16:33:37
- * @LastEditTime: 2021-12-23 15:58:56
+ * @LastEditTime: 2021-12-23 19:07:42
 * @LastEditors: peii
 * @Vision: 1.0
 * @Description: 结算汇总
@@ -15,12 +15,13 @@ import { connect } from 'react-redux'
 import * as R from 'ramda'
 import { INavigation } from 'navigation'
 import { IFormField } from 'bonehouse'
+import debounce from 'debounce'
 import Loading from '../../../app/containers/common/LodingModel'
 import Header from '../../components/header/header'
 import Resolution from '../../components/common/Resolution'
 import FilterModal from './components/filter'
 import SettlementList from './components/list'
-import { isBlank, g } from '../../utils/utils'
+import { isBlank, g, isNotBlank } from '../../utils/utils'
 import { FieldType } from '../../enums'
 import api from '../../services/api'
 import styles from './index.styl'
@@ -40,7 +41,7 @@ class SettlementCollection extends React.Component<IProps, IState> {
  constructor(props: IProps) {
    super(props)
    this.toggleModalVisible = this.toggleModalVisible.bind(this)
-    this.getData = this.getData.bind(this)
+    this.getData = debounce(this.getData.bind(this), 200)
  }
  state = {
    modalVisible: false,
@@ -53,7 +54,7 @@ class SettlementCollection extends React.Component<IProps, IState> {
        type: FieldType.TEXT,
      },
      {
-        field: 'status',
+        field: 'header_status',
        label: '状态',
        type: FieldType.RADIO,
        options: R.map(
@@ -64,11 +65,16 @@ class SettlementCollection extends React.Component<IProps, IState> {
        )(this.props.status),
      },
    ],
+    pagination: {
+      start_index: 0,
+      limit: 10,
+    },
+    filterData: {},
+    isEnd: false,
  }
  componentDidMount() {
    this.toggleModalVisible()
-    console.log(this.props.status)
  }
  toggleModalVisible(): void {
@@ -80,14 +86,47 @@ class SettlementCollection extends React.Component<IProps, IState> {
   * @param {*}
   * @return {*}
   */
-  async getData(args): void {
+  async getData(args, isRefresh = false, isNext = false): void {
+    // 确认页面只过滤出已输入的那些
+    let { pagination, filterData, data, isEnd } = this.state
+    if (isRefresh || isNotBlank(args)) {
+      pagination.start_index = 0
+    }
+    if (isNext) {
+      pagination.start_index += pagination.limit
+      if (isEnd) return
+    }
+    if (isBlank(args)) {
+      args = filterData
+    }
+    const params = {
+      ...args,
+      ...pagination,
+    }
+    if (!isRefresh && !isNext) {
      this.setState({ loading: true })
-    const res = await api.getSettlements(args)
+    }
+    const res = await api.getSettlements(params)
    this.setState({ loading: false })
    if (res.error_code !== 0) return
-    const data = R.propOr([], 'data')(res)
+    const newData = R.propOr([], 'data')(res)
-    this.setState({ data })
+    if (isBlank(newData) || newData.length < pagination.limit) {
+      isEnd = true
+    } else {
+      isEnd = false
+    }
+    if (isNext) {
+      data = R.concat(data, newData)
+    } else {
+      data = newData
+    }
+    this.setState({ data, filterData: args, isEnd })
  }
  render() {
@@ -117,7 +156,11 @@ class SettlementCollection extends React.Component<IProps, IState> {
              otherFilterItems={otherFilterItems}
            />
-            {loading ? <Loading show={loading} /> : <SettlementList data={data} {...this.props} isCollection={true} />}
+            {loading ? (
+              <Loading show={loading} />
+            ) : (
+              <SettlementList data={data} {...this.props} isCollection={true} getData={this.getData} />
+            )}
          </View>
        </Resolution.FixWidthView>
      </View>

--- a/src/pages/settlement/components/list.styl
+++ b/src/pages/settlement/components/list.styl
@@ -3,11 +3,13 @@
 .list
  width 100%
-  padding 20px
+  padding-top 20px
-  margin-bottom 25px
+  padding-bottom 25px
 .item
  background-color #fff
+  margin-left 20px
+  margin-right 20px
  padding 15px
  margin-bottom 15px

--- a/src/pages/settlement/components/list.tsx
+++ b/src/pages/settlement/components/list.tsx
@@ -2,7 +2,7 @@
 * @FilePath: /BoneHouse_Business_APP/src/pages/settlement/components/list.tsx
 * @Author: peii
 * @Date: 2021-12-19 10:44:15
- * @LastEditTime: 2021-12-21 17:21:48
+ * @LastEditTime: 2021-12-23 18:43:04
 * @LastEditors: peii
 * @Vision: 1.0
 * @Description: 汇总列表
@@ -10,10 +10,11 @@
 // @ts-nocheck
 import React, { Component } from 'react'
-import { View, Text, TouchableOpacity, FlatList, Image } from 'react-native'
+import { View, Text, TouchableOpacity, FlatList, RefreshControl } from 'react-native'
 import * as R from 'ramda'
 import { connect } from 'react-redux'
 import { INavigation } from 'navigation'
+import debounce from 'debounce'
 import Empty from '../../../components/empty'
 import dayjs from 'dayjs'
 import { isBlank, g } from '../../../utils/utils'
@@ -22,6 +23,7 @@ import styles from './list.styl'
 type IProps = {
  data: any[]
  navigation: INavigation
+  getData: Function
 }
 class SettlementList extends Component<IProps> {
@@ -31,6 +33,16 @@ class SettlementList extends Component<IProps> {
    this.itemPressHandler = this.itemPressHandler.bind(this)
  }
+  state = {
+    refreshing: false,
+  }
+  refreshing = false
+  componentDidMount() {
+    this.onRefreshHandler = debounce(this.onRefreshHandler.bind(this), 200)
+    this.onEndReachedHandler = debounce(this.onEndReachedHandler.bind(this), 500)
+  }
  /**
   * @description:
   * @param {*} item
@@ -62,6 +74,31 @@ class SettlementList extends Component<IProps> {
    [R.T, R.always('text-gray')],
  ])
+  refreshing = false
+  /**
+   * @description: 下拉刷新
+   * @param {*}
+   * @return {*}
+   */
+  async onRefreshHandler() {
+    if (this.state.refreshing) return
+    refreshing = true
+    this.setState({ refreshing: true })
+    await this.props.getData(null, true)
+    refreshing = false
+    this.setState({ refreshing: false })
+  }
+  async onEndReachedHandler() {
+    if (this.refreshing || isBlank(this.props.data)) return
+    this.refreshing = true
+    await this.props.getData(null, false, true)
+    this.refreshing = false
+  }
  /**
   * @description: 结算单单项
   * @param {*} param1
@@ -99,14 +136,20 @@ class SettlementList extends Component<IProps> {
  render() {
    const { data = [] } = this.props
+    const { refreshing } = this.state
    return (
+      <View style={g(styles, 'list')}>
        <FlatList
          data={data}
          renderItem={this.renderItem}
          ListEmptyComponent={Empty}
-        style={g(styles, 'list')}
+          style={g(styles, 'list-inner')}
          keyExtractor={it => it.settlement_number}
+          refreshControl={<RefreshControl onRefresh={this.onRefreshHandler} refreshing={refreshing} />}
+          onEndReached={this.onEndReachedHandler}
        ></FlatList>
+      </View>
    )
  }
 }

--- a/src/pages/settlement/index.tsx
+++ b/src/pages/settlement/index.tsx
@@ -2,7 +2,7 @@
 * @FilePath: /BoneHouse_Business_APP/src/pages/settlement/index.tsx
 * @Author: peii
 * @Date: 2021-12-18 16:33:37
- * @LastEditTime: 2021-12-23 15:16:06
+ * @LastEditTime: 2021-12-23 19:06:35
 * @LastEditors: peii
 * @Vision: 1.0
 * @Description: 结算确认首页
@@ -14,12 +14,13 @@ import { View, Text, TouchableOpacity, FlatList, Image } from 'react-native'
 import { connect } from 'react-redux'
 import * as R from 'ramda'
 import { INavigation } from 'navigation'
+import debounce from 'debounce'
 import Loading from '../../../app/containers/common/LodingModel'
 import Header from '../../components/header/header'
 import Resolution from '../../components/common/Resolution'
 import FilterModal from './components/filter'
 import SettlementList from './components/list'
-import { isBlank, g } from '../../utils/utils'
+import { isBlank, g, isNotBlank } from '../../utils/utils'
 import api from '../../services/api'
 import styles from './index.styl'
@@ -37,12 +38,18 @@ class Settlement extends React.Component<IProps, IState> {
  constructor(props: IProps) {
    super(props)
    this.toggleModalVisible = this.toggleModalVisible.bind(this)
-    this.getData = this.getData.bind(this)
+    this.getData = debounce(this.getData.bind(this), 300)
  }
  state = {
    modalVisible: false,
    data: [],
    loading: false,
+    pagination: {
+      start_index: 0,
+      limit: 10,
+    },
+    filterData: {},
+    isEnd: false,
  }
  componentDidMount() {
@@ -58,17 +65,48 @@ class Settlement extends React.Component<IProps, IState> {
   * @param {*}
   * @return {*}
   */
-  async getData(args): void {
+  async getData(args, isRefresh = false, isNext = false): void {
-    this.setState({ loading: true })
    // 确认页面只过滤出已输入的那些
-    args.status = 'ENTERED'
+    let { pagination, filterData, data, isEnd } = this.state
+    if (isRefresh || isNotBlank(args)) {
+      pagination.start_index = 0
+    }
+    if (isNext) {
+      pagination.start_index += pagination.limit
-    const res = await api.getSettlements(args)
+      if (isEnd) return
+    }
+    if (isBlank(args)) {
+      args = filterData
+    }
+    const params = {
+      ...args,
+      ...pagination,
+    }
+    args.header_status = 'ENTERED'
+    if (!isRefresh && !isNext) {
+      this.setState({ loading: true })
+    }
+    const res = await api.getSettlements(params)
    this.setState({ loading: false })
    if (res.error_code !== 0) return
-    const data = R.propOr([], 'data')(res)
+    const newData = R.propOr([], 'data')(res)
-    this.setState({ data })
+    if (isBlank(newData) || newData.length < pagination.limit) {
+      isEnd = true
+    } else {
+      isEnd = false
+    }
+    if (isNext) {
+      data = R.concat(data, newData)
+    } else {
+      data = newData
+    }
+    this.setState({ data, filterData: args, isEnd })
  }
  render() {
@@ -93,7 +131,11 @@ class Settlement extends React.Component<IProps, IState> {
            {/* 过滤弹窗 */}
            <FilterModal visible={modalVisible} onClose={this.toggleModalVisible} searchHandler={this.getData} />
-            {loading ? <Loading show={loading} /> : <SettlementList data={data} {...this.props} />}
+            {loading ? (
+              <Loading show={loading} />
+            ) : (
+              <SettlementList data={data} {...this.props} getData={this.getData} />
+            )}
          </View>
        </Resolution.FixWidthView>
      </View>