Skip to content

zhangzhonghua / BoneHouse_Business_APP

Go to a project
Commit 1c1e0e11 by peii
Options

过滤及下拉刷新

parent 71810a43
Inline Side-by-side
Showing with 194 additions and 41 deletions
app.json
{
"name": "BoneHouse_Hospital_APP",
"displayName": "BoneHouse_Hospital_APP"
"name": "BoneHouse_Business_APP",
"displayName": "BoneHouse_Business_APP"
}
\ No newline at end of file
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()
}
......
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>
......
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
......
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
onChange(item.field, option.value)
let values = isBlank(value) ? [] : R.split(',', 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 && (
......
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)
this.setState({ data })
const newData = R.propOr([], 'data')(res)
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>
......
src/pages/settlement/components/list.styl
......@@ -3,11 +3,13 @@
.list
width 100%
padding 20px
margin-bottom 25px
padding-top 20px
padding-bottom 25px
.item
background-color #fff
margin-left 20px
margin-right 20px
padding 15px
margin-bottom 15px
......
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>
)
}
}
......
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 {
this.setState({ loading: true })
async getData(args, isRefresh = false, isNext = false): void {
// 确认页面只过滤出已输入的那些
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)
this.setState({ data })
const newData = R.propOr([], 'data')(res)
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>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment