结算汇总页

App.js

@@ -9,10 +9,9 @@ import React, { Component } from 'react'
 import { Text, TextInput } from 'react-native'
 import { Provider } from 'react-redux'
 import CodePush from 'react-native-code-push'
-import configureStore from './app/store/configureStore'
+import store from './app/store/configureStore'
 import Router from './app/Router'
 import { show } from './app/utils/Utils'
-const store = configureStore()
 
 // 字体不随系统字体变化 首字母不大写
 Text.defaultProps = Object.assign({}, Text.defaultProps, { allowFontScaling: false })

app/Router.js

@@ -26,6 +26,11 @@ import LineOrderPage from './containers/historicalOrder/module/LineOrderPage';
 import SubSuccPage from './containers/common/SubSuccPage';
 import BarCodePage from './containers/common/BarCodePage';
 
+// 结算
+import Settlement from '../src/pages/settlement/index';
+import SettlementReject from '../src/pages/settlement/reject';
+
+
 const Router = createAppContainer(createStackNavigator({
   LoginPage: { screen: LoginPage },
   HomePage: {screen: HomePage},
@@ -48,6 +53,8 @@ const Router = createAppContainer(createStackNavigator({
   LineOrderPage: {screen: LineOrderPage},
   SubSuccPage: {screen: SubSuccPage},
   BarCodePage: {screen: BarCodePage},
+  Settlement: {screen: Settlement},
+  SettlementReject: {screen: SettlementReject},
 }, {
     navigationOptions: {
         gesturesEnabled: true

app/action/LoginAction.js

@@ -9,7 +9,8 @@ import {
     SET_DOMAIN_CONFIGURATE,
     SET_VERSION_APK,
     SET_DOMAIN_FROM_ORIGIN,
-    SET_SYSPROFILE
+    SET_SYSPROFILE,
+    SET_NAVIGATION
 } from '../base/ActionTypes';
 import { GetRequest, PostRequest } from '../network/RequestUtils';
 import { getUrlParams, show, showWarnErrorMessage, showErrorMessage, isNotBlank } from '../utils/Utils';
@@ -202,3 +203,15 @@ export function setSysProfiles(code, value) {
         value
     }
 }
+
+/**
+ * @description: 设置路由
+ * @param {*} navigation
+ * @return {*}
+ */
+export function setNavigation(navigation) {
+    return {
+        type: SET_NAVIGATION,
+        navigation
+    }
+}
\ No newline at end of file

app/base/ActionTypes.js

@@ -11,6 +11,7 @@ export const SET_DOMAIN_FROM_ORIGIN = 'SET_DOMAIN_FROM_ORIGIN'
 export const SET_VERSION_APK="SET_VERSION_APK"
 export const GET_SYSPROFILE = "GET_SYSPROFILE"
 export const SET_SYSPROFILE = "SET_SYSPROFILE"
+export const SET_NAVIGATION = "SET_NAVIGATION"
 //-----------self order---------------------
 export const SELF_ORDER_LIST_NO = "SELF_ORDER_LIST_NO"
 export const SELF_ORDER_LIST_DOING = "SELF_ORDER_LIST_DOING"

app/containers/home/HomePage.js

@@ -13,7 +13,7 @@ import {
   safe_view,
   font_family_regular,
 } from '../../base/BaseStyle'
-import { exitLoginStatus, requestSysProfile } from '../../action/LoginAction'
+import { exitLoginStatus, requestSysProfile, setNavigation } from '../../action/LoginAction'
 import HeadBackItem from '../common/HeadBackItem'
 import StatusBarView from '../common/StatusBarView'
 import TabBottomItem from './module/TabBottomItem'
@@ -61,7 +61,7 @@ class HomePage extends Component {
           MOBILE_DISTRIBUTION_CONFIRM: {
             icon: require('../../images/quick_order.png'),
             title: '分销-结算确认',
-            page: 'QuickOrderPage',
+            page: 'Settlement',
           },
           MOBILE_DISTRIBUTION_INVOICE_APPLICATION: {
             icon: require('../../images/quick_order.png'),
@@ -91,7 +91,7 @@ class HomePage extends Component {
         },
       },
       tabs: [],
-      initialPage: 0,
+      initialPage: 1,
       icons: {
         MOBILE_BUSINESS_MODULE: {
           defIcon: require('../../images/tab_mod_def.png'),
@@ -113,6 +113,7 @@ class HomePage extends Component {
   componentDidMount() {
     this.getMenuRuleInfo()
     this.getSysConfigValue()
+    this.props.setNavigation(this.props.navigation)
   }
 
   componentWillReceiveProps(nextProps) {
@@ -316,6 +317,9 @@ const mapDispatchToProps = dispatch => ({
   exitLoginStatus: () => {
     dispatch(exitLoginStatus())
   },
+  setNavigation: (navigation) => {
+    dispatch(setNavigation(navigation))
+  }
 })
 
 export default connect(mapStateToProps, mapDispatchToProps)(HomePage)

app/reducers/module/login.js

@@ -9,7 +9,8 @@ import {
     SET_DOMAIN_CONFIGURATE,
     SET_VERSION_APK,
     SET_DOMAIN_FROM_ORIGIN,
-    SET_SYSPROFILE
+    SET_SYSPROFILE,
+    SET_NAVIGATION
 } from '../../base/ActionTypes';
 
 // 登录状态
@@ -22,6 +23,7 @@ const defaultState = {
     global_domain_config: 'https://obs.uat.guke.tech',
     hasSetDomainFromOrigin: false,
     local_version_apk: '',
+    navigation: null,
     sysProfiles: {
         OBS_SHOW_ORG_FLAG: 'Y',
         SUR_MOBILE_HISTORY_SALE_PRICE_SHOW_FLAG: 'Y',
@@ -92,6 +94,10 @@ export default login = (state = defaultState, action) => {
                     [action.code]: action.value
                 }
             })
+        case SET_NAVIGATION:
+            return Object.assign({}, state, {
+                navigation: action.navigation
+            })
         default: // need this for default case
             return state
     }

app/store/configureStore.js

@@ -21,9 +21,12 @@ const reducers = persistCombineReducers(config,rootReducer);
 
 const enhances = [applyMiddleware(...middleWares)];
 
-export default function configureStore(initialState) {
+function configureStore(initialState) {
 
     const store = createStore(reducers,initialState,compose(...enhances));
     persistStore(store); //暂时磁盘保存数据
     return store
 }
+const store = configureStore()
+
+export default store
\ No newline at end of file

package.json

@@ -16,6 +16,7 @@
     "dayjs": "^1.10.7",
     "lodash.debounce": "^4.0.8",
     "moment": "2.29.1",
+    "querystring": "^0.2.1",
     "ramda": "^0.27.1",
     "react": "16.8.3",
     "react-native": "0.59.9",

src/components/form/input.tsx

@@ -6,6 +6,7 @@
  * @Description: 文本输入组件
  *
  */
+// @ts-nocheck
 
 import React, { Component } from 'react'
 import { View, Text, Image, TouchableOpacity, TextInput } from 'react-native'
@@ -21,6 +22,7 @@ import styles from './index.styl'
 type IProps = {
   item: IFormField
   onChange: Function
+  itemStyle: any
 }
 
 export default class Input extends Component<IProps> {
@@ -35,10 +37,10 @@ export default class Input extends Component<IProps> {
   }
 
   render() {
-    const { item, value } = this.props
+    const { item, value, itemStyle } = this.props
 
     return (
-      <View style={g(styles, { 'form-item': true, 'form-item-multi': item.multiline })}>
+      <View style={[g(styles, { 'form-item': true, 'form-item-multi': item.multiline }), itemStyle]}>
         <Title item={item} />
 
         <TextInput

src/components/form/select.tsx

 /*
- * @FilePath: /BoneHouse_Hospital_APP/src/components/form/select.tsx
+ * @FilePath: /BoneHouse_Business_APP/src/components/form/select.tsx
  * @Author: peii
  * @Date: 2021-04-25 23:36:10
  * @Vision: 1.0
@@ -24,6 +24,7 @@ type IProps = {
   data: any
   fields: any[]
   modalCallback: Function
+  itemStyle: any
 }
 
 /**
@@ -166,13 +167,13 @@ export default class Select extends Component<IProps> {
   }
 
   render() {
-    const { item, value } = this.props
+    const { item, value, itemStyle } = this.props
     const text = getText(item, value)
 
     return (
       <>
         <TouchableOpacity
-          style={g(styles, 'form-item')}
+          style={[g(styles, 'form-item'), itemStyle]}
           activeOpacity={item.disabled ? 1 : 0.8}
           onPress={this.onPressHandler}
         >

src/components/modals/base/bottom.styl

@@ -5,14 +5,14 @@
   position absolute
   left 0
   top 0
-  z-index 99
+  z-index 199
 
   &-mask
     @extend .modal
     width 100%
     height 100%
     background-color rgba(0, 0, 0, 0.5)
-    z-index 99
+    z-index 199 
 
   &-content
     position absolute
@@ -23,7 +23,7 @@
     bottom 0
     border-top-left-radius 5px
     border-top-right-radius 5px
-    z-index 999
+    z-index 200 
 
     &__date
       max-height 400px

src/components/modals/base/top.styl

@@ -23,7 +23,7 @@
     bottom 0
     border-top-left-radius 5px
     border-top-right-radius 5px
-    z-index 999
+    z-index 100
 
     &__date
       max-height 400px

src/components/modals/base/top.tsx

 /*
- * @FilePath: /BoneHouse_Hospital_APP/src/components/modals/base/top.tsx
+ * @FilePath: /BoneHouse_Business_APP/src/components/modals/base/top.tsx
  * @Author: peii
  * @Date: 2021-04-27 21:53:02
  * @Vision: 1.0
@@ -8,6 +8,7 @@
  * @Revision:
  *
  */
+// @ts-nocheck
 import React, { useEffect, useRef, useState, createRef } from 'react'
 import { View, Text, TouchableOpacity, ScrollView, Animated, Platform } from 'react-native'
 import { Provider, Modal } from '@ant-design/react-native'

src/components/modals/filter/filter.styl

+@import '../../../assets/styles/base.styl'
+@import '../../../assets/styles/variable.styl'
+
+.filter
+  flex 1
+  background-color home_background_color
+  width 100%
+  z-index 100
+
+  &-bd
+    // padding 0 20px
+    height 310px
+    padding-bottom 20px
+    z-index 100
+
+    &__inner
+      padding 20px
+      z-index 100
+
+  &-item
+    &__bd
+      padding 0
+      margin-bottom 0
+      height 48px
+
+  &-ft
+    @extend .row
+    position absolute
+    bottom -40px
+    width 100%
+    height 48px
+    background-color #fff
+    justify-content space-between
+    align-items center
+
+.btn
+  width 50%
+  align-items center
+  justify-content center
+  background-color #E7F1FD
+  height 100%
+  border-right-width 1px
+  border-top-width 1px
+  border-color #ddd
+
+  &-primary
+    background-color primary_color
+
+    &__text
+      color #fff
+
+  &-text
+    color primary_color
+    font-size second_text_size
+    font-weight bold

src/components/modals/filter/filter.tsx

+/*
+ * @FilePath: /BoneHouse_Business_APP/src/components/modals/filter/filter.tsx
+ * @Author: peii
+ * @Date: 2021-12-19 10:49:42
+ * @LastEditTime: 2021-12-19 17:37:05
+ * @LastEditors: peii
+ * @Vision: 1.0
+ * @Description: 过滤弹窗
+ */
+// @ts-nocheck
+
+import React from 'react'
+import { View, ScrollView, TouchableOpacity, Text } from 'react-native'
+import * as R from 'ramda'
+import { IFormField } from 'bonehouse'
+import { isBlank, g } from '../../../utils/utils'
+import { FieldType } from '../../../enums'
+import { TopModal } from '../base/top'
+import FormInput from '../../form/input'
+import FormSelect from '../../form/select'
+import styles from './filter.styl'
+
+type IProps = {
+  visible: boolean
+  data: { [key: string]: string }
+  formItems: IFormField[]
+  onClose: Function
+  setData: Function
+  resetHandler: Function
+  filterHandler: Function
+}
+
+type IState = {
+  action: number
+}
+
+const FormComponents = {
+  [FieldType.TEXT]: FormInput,
+  [FieldType.SELECT]: FormSelect,
+}
+
+export default class Filter extends React.Component<IProps, IState> {
+  constructor(props) {
+    super(props)
+  }
+
+  state: IState = {
+    action: 0,
+    modal: null,
+  }
+
+  modalCallback(modal: ReactComponent) {
+    this.setState({ modal })
+  }
+
+  render() {
+    const { action, modal } = this.state
+    const { visible, filterItems, data } = this.props
+    return (
+      <TopModal visible={visible} action={action} onClose={this.props.onClose} initTop={0}>
+        <View style={g(styles, 'filter-bd')}>
+          <ScrollView style={g(styles, 'filter-bd__inner')}>
+            {filterItems.map(item => {
+              const FormComponent = FormComponents[item.type] || FormInput
+              return (
+                <View style={g(styles, 'filter-item')} key={item.field}>
+                  <FormComponent
+                    item={item}
+                    value={data[item.field]}
+                    onChange={this.props.setData}
+                    itemStyle={g(styles, 'filter-item__bd')}
+                    modalCallback={this.modalCallback.bind(this)}
+                  />
+                </View>
+              )
+            })}
+          </ScrollView>
+
+          <View style={g(styles, 'filter-ft')}>
+            <TouchableOpacity style={g(styles, 'btn')} activeOpacity={0.8} onPress={this.props.resetHandler}>
+              <Text style={g(styles, 'btn-text')}>重置</Text>
+            </TouchableOpacity>
+            <TouchableOpacity
+              style={g(styles, 'btn', 'btn-primary')}
+              activeOpacity={0.8}
+              onPress={this.props.filterHandler}
+            >
+              <Text style={g(styles, 'btn-text', 'btn-primary__text')}>确定</Text>
+            </TouchableOpacity>
+          </View>
+        </View>
+
+        {modal}
+      </TopModal>
+    )
+  }
+}

src/pages/settlement/components/filter.styl

+@import '../../../assets/styles/base.styl'
+@import '../../../assets/styles/variable.styl'

src/pages/settlement/components/filter.tsx

+/*
+ * @FilePath: /BoneHouse_Business_APP/src/pages/settlement/components/filter.tsx
+ * @Author: peii
+ * @Date: 2021-12-19 10:49:42
+ * @LastEditTime: 2021-12-19 18:26:15
+ * @LastEditors: peii
+ * @Vision: 1.0
+ * @Description: 过滤弹窗
+ */
+// @ts-nocheck
+
+import React from 'react'
+import { View, Text, TouchableOpacity, FlatList, Image, ScrollView } from 'react-native'
+import { connect } from 'react-redux'
+import * as R from 'ramda'
+import { IFormField } from 'bonehouse'
+import api from '../../../services/api'
+import { isBlank, g, getFormItem } from '../../../utils/utils'
+import { FieldType } from '../../../enums'
+import Filter from '../../../components/modals/filter/filter'
+import styles from './filter.styl'
+
+type IProps = {
+  onClose?: Function
+  userInfo: any
+  sysProfiles: {
+    OBS_SHOW_ORG_FLAG: string
+  }
+}
+
+type IState = {
+  action: number
+  data: { [key: string]: string }
+  formItems: IFormField[]
+}
+
+class FilterModal extends React.Component<IProps, IState> {
+  constructor(props) {
+    super(props)
+    this.onClose = this.onClose.bind(this)
+    this.setData = this.setData.bind(this)
+    this.resetHandler = this.resetHandler.bind(this)
+    this.filterHandler = this.filterHandler.bind(this)
+  }
+
+  state = {
+    data: {
+      seller_code: this.props.userInfo.user_name,
+    },
+    filterItems: [
+      {
+        field: 'seller_code',
+        label: '销售员',
+        disabled: true,
+        type: FieldType.SELECT,
+        options: [
+          {
+            value: this.props.userInfo.user_name,
+            label: this.props.userInfo.person_name,
+          },
+        ],
+      },
+      {
+        field: 'customer_code',
+        label: '客户',
+        type: FieldType.SELECT,
+        rules: [{ required: true, message: '请选择客户' }],
+      },
+    ],
+  }
+
+  componentDidMount() {
+    this.setFieldItems()
+
+    this.getCustomers()
+  }
+
+  onClose() {
+    this.props.onClose && this.props.onClose()
+  }
+
+  /**
+   * @description: 输入
+   * @param {*} key 输入项
+   * @param {*} value 输入值
+   * @return {*}
+   */
+  setData(key: string, value: any) {
+    const { data } = this.state
+    data[key] = value
+    this.setState({ data })
+  }
+
+  /**
+   * @description: 设置动态搜索项
+   * @param {*}
+   * @return {*}
+   */
+  setFieldItems() {
+    let { filterItems, data } = this.state
+    const { userInfo, sysProfiles } = this.props
+    const showOrg = sysProfiles.OBS_SHOW_ORG_FLAG !== 'N'
+    data.org_code = userInfo.department_code
+
+    if (!showOrg) return
+
+    const item = {
+      field: 'org_code',
+      label: '组织',
+      type: FieldType.SELECT,
+      options: [],
+      rules: [{ required: true, message: '请选择组织' }],
+    }
+    filterItems = R.insert(1, item, filterItems)
+    this.getOrganizations()
+    this.setState({ filterItems })
+  }
+
+  /**
+   * @description: 请求组织信息
+   * @param {*}
+   * @return {*}
+   */
+  async getOrganizations() {
+    const res = await api.getOrganizations()
+    if (res.error_code) return
+
+    const { filterItems } = this.state
+    const item = getFormItem(filterItems, 'org_code')
+    item.options = R.compose(
+      R.map(
+        R.applySpec({
+          value: R.prop('org_code'),
+          label: R.prop('org_name'),
+        }),
+      ),
+      R.pathOr([], ['data', 'organizations']),
+    )(res)
+    this.setState({ filterItems })
+  }
+
+  /**
+   * @description: 请求客户信息
+   * @param {*}
+   * @return {*}
+   */
+  async getCustomers() {
+    const { data, filterItems } = this.state
+    const params = {
+      org_code: data.org_code,
+      seller_code: data.seller_code,
+    }
+    const res = await api.getCustomers(params)
+    if (res.error_code) return
+
+    const item = getFormItem(filterItems, 'customer_code')
+
+    // item.options = R.
+    // TODO:
+  }
+
+  /**
+   * @description: 重置搜索项
+   * @param {*}
+   * @return {*}
+   */
+  resetHandler() {
+    const { userInfo } = this.props
+    this.setState(
+      {
+        data: {
+          seller_code: userInfo.user_name,
+          org_code: userInfo.department_code,
+        },
+      },
+      () => {},
+    )
+  }
+
+  /**
+   * @description: 搜索操作
+   * @param {*}
+   * @return {*}
+   */
+  filterHandler() {
+    const { data } = this.state
+    this.props.searchHandler && this.props.searchHandler(data)
+    this.onClose()
+  }
+
+  render() {
+    const { filterItems, data } = this.state
+    const { visible } = this.props
+
+    return (
+      <Filter
+        style={g(styles, 'filter-modal')}
+        visible={visible}
+        data={data}
+        filterItems={filterItems}
+        onClose={this.onClose}
+        setData={this.setData}
+        resetHandler={this.resetHandler}
+        filterHandler={this.filterHandler}
+      />
+    )
+  }
+}
+
+const mapStateToProps = state => ({
+  userInfo: state.login.userInfo,
+  sysProfiles: state.login.sysProfiles,
+})
+
+const mapDispatchToProps = dispatch => ({})
+
+export default connect(mapStateToProps, mapDispatchToProps)(FilterModal)

src/pages/settlement/components/list.styl

+@import '../../../assets/styles/base.styl'
+@import '../../../assets/styles/variable.styl'
+
+.list
+  width 100%
+  padding 20px
+
+.item
+  background-color #fff
+  padding 15px
+
+  &-line
+    @extend .row
+    justify-content space-between
+
+  &-text
+    font-size 16px
+    line-height 28px
\ No newline at end of file

src/pages/settlement/components/list.tsx

+/*
+ * @FilePath: /BoneHouse_Business_APP/src/pages/settlement/components/list.tsx
+ * @Author: peii
+ * @Date: 2021-12-19 10:44:15
+ * @LastEditTime: 2021-12-19 18:04:24
+ * @LastEditors: peii
+ * @Vision: 1.0
+ * @Description: 汇总列表
+ */
+// @ts-nocheck
+
+import React, { Component } from 'react'
+import { View, Text, TouchableOpacity, FlatList, Image } from 'react-native'
+import * as R from 'ramda'
+import { isBlank, g } from '../../../utils/utils'
+import styles from './list.styl'
+
+type IProps = {
+  data: any[]
+}
+
+class SettlementList extends Component<IProps> {
+  constructor(props) {
+    super(props)
+    this.renderItem = this.renderItem.bind(this)
+  }
+
+  /**
+   * @description: 结算单单项
+   * @param {*} param1
+   * @return {*}
+   */
+  renderItem({ item, index }) {
+    return (
+      <View style={g(styles, 'item')}>
+        <View style={g(styles, 'item-line')}>
+          <Text style={g(styles, 'item-text')}>{item.settlement_number}</Text>
+          <Text style={g(styles, 'item-text')}>{item.settled_date}</Text>
+        </View>
+        <View style={g(styles, 'item-line')}>
+          <View style={g(styles, 'item-left')}>
+            <Text style={g(styles, 'item-text')}>结算总数量: {item.settlement_quantity}</Text>
+            <Text style={g(styles, 'item-text')}>结算总金额: {item.settlement_price}</Text>
+          </View>
+          <View style={g(styles, 'item-right')}></View>
+        </View>
+
+        <View style={g(styles, 'item-line')}>
+          <Text style={g(styles, 'item-text')}>备注: {item.remark}</Text>
+          <Text style={g(styles, 'item-text')}>{item.customer_name}</Text>
+          <Text style={g(styles, 'item-text')}>{item.status || '未确定'}</Text>
+        </View>
+      </View>
+    )
+  }
+
+  render() {
+    const { data = [] } = this.props
+    return (
+      <FlatList
+        data={data}
+        renderItem={this.renderItem}
+        style={g(styles, 'list')}
+        keyExtractor={it => it.settlement_number}
+      ></FlatList>
+    )
+  }
+}
+
+export default SettlementList

src/pages/settlement/index.styl

+@import '../../assets/styles/base.styl'
+@import '../../assets/styles/variable.styl'
+
+.filter
+  width 100%
+  align-items flex-end
+
+  &-icon
+    width 30px
+    height @width
+    margin-top 5px
+
+.body
+  flex 1
+  background-color home_background_color
\ No newline at end of file

src/pages/settlement/index.tsx

+/*
+ * @FilePath: /BoneHouse_Business_APP/src/pages/settlement/index.tsx
+ * @Author: peii
+ * @Date: 2021-12-18 16:33:37
+ * @LastEditTime: 2021-12-19 18:25:26
+ * @LastEditors: peii
+ * @Vision: 1.0
+ * @Description: 结算确认首页
+ */
+// @ts-nocheck
+
+import React, { useEffect, useRef, useState, createRef } from 'react'
+import { View, Text, TouchableOpacity, FlatList, Image } from 'react-native'
+import { connect } from 'react-redux'
+import * as R from 'ramda'
+import { INavigation } from 'navigation'
+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 api from '../../services/api'
+import styles from './index.styl'
+
+type IProps = {
+  navigation: INavigation
+}
+
+type IState = {
+  modalVisible: boolean
+  data: any[]
+  loading: boolean
+}
+
+class Settlement extends React.Component<IProps, IState> {
+  constructor(props: IProps) {
+    super(props)
+    this.toggleModalVisible = this.toggleModalVisible.bind(this)
+    this.getData = this.getData.bind(this)
+  }
+  state = {
+    modalVisible: false,
+    data: [
+      {
+        settlement_number: 'SUR20212020020',
+        settled_date: '2021-01-01',
+        settlement_quantity: 30,
+        settlement_price: 999,
+      },
+    ],
+    loading: false,
+  }
+
+  toggleModalVisible(): void {
+    this.setState({ modalVisible: !this.state.modalVisible })
+  }
+
+  /**
+   * @description: 请求结算列表信息
+   * @param {*}
+   * @return {*}
+   */
+  async getData(args): void {
+    const res = await api.getSettlements(args)
+  }
+
+  render() {
+    const title = this.props.navigation.getParam('title', '骨科智慧仓')
+    const { modalVisible, data, loading } = this.state
+
+    return (
+      <View style={g(styles, 'container')}>
+        <Resolution.FixWidthView>
+          <Header
+            title={title}
+            backCallback={() => {
+              this.props.navigation.goBack()
+            }}
+          >
+            <TouchableOpacity style={g(styles, 'filter')} activeOpacity={0.8} onPress={this.toggleModalVisible}>
+              <Image source={require('../../assets/images/filter_icon.png')} style={g(styles, 'filter-icon')} />
+            </TouchableOpacity>
+          </Header>
+
+          <View style={g(styles, 'body')}>
+            {/* 过滤弹窗 */}
+            <FilterModal visible={modalVisible} onClose={this.toggleModalVisible} searchHandler={this.getData} />
+
+            {/* 结算列表 */}
+            <SettlementList data={data} />
+          </View>
+        </Resolution.FixWidthView>
+      </View>
+    )
+  }
+}
+
+const mapStateToProps = state => ({})
+
+const mapDispatchToProps = dispatch => ({})
+
+export default connect(mapStateToProps, mapDispatchToProps)(Settlement)

src/pages/settlement/reject.styl

+@import '../../assets/styles/base.styl'
+@import '../../assets/styles/variable.styl'
+  
\ No newline at end of file

src/pages/settlement/reject.tsx

+/*
+ * @FilePath: /BoneHouse_Business_APP/src/pages/settlement/reject.tsx
+ * @Author: peii
+ * @Date: 2021-12-18 17:12:57
+ * @LastEditTime: 2021-12-18 17:53:46
+ * @LastEditors: peii
+ * @Vision: 1.0
+ * @Description: 结算驳回
+ */
+// @ts-nocheck
+
+import React, { useEffect, useRef, useState, createRef } from 'react'
+import { View, Text, TouchableOpacity, FlatList, Image } from 'react-native'
+import * as R from 'ramda'
+import { INavigation } from 'navigation'
+import { IFormField } from 'bonehouse'
+import { FieldType } from '../../enums'
+import Header from '../../components/header/header'
+import Form from '../../components/form/index'
+import Resolution from '../../components/common/Resolution'
+import { isBlank, g, getFormItem } from '../../utils/utils'
+import styles from './reject.styl'
+
+type IProps = {
+  navigation: INavigation
+}
+
+type IState = {
+  formItems: IFormField[]
+}
+
+class Reject extends React.Component<IProps, IState> {
+  constructor(props) {
+    super(props)
+    this.setData = this.setData.bind(this)
+    this.submitHandler = this.submitHandler.bind(this)
+  }
+  state: IState = {
+    data: {},
+    formItems: [
+      {
+        field: 'reject_reason',
+        label: '驳回理由',
+        type: FieldType.TEXT,
+        multiline: true,
+        rules: [{ required: true, message: '请输入驳回理由' }],
+      },
+    ],
+  }
+
+  /**
+   * @description: 设置修改值
+   * @param {*} key
+   * @param {*} vlaue
+   * @return {*}
+   */
+  setData(key: string, value: any) {
+    return new Promise<any>((resolve, reject) => {
+      const { data, formItems } = this.state
+      data[key] = value
+      this.setState({ data }, () => {
+        const item = getFormItem(formItems, key)
+        item && item.callback && item.callback()
+        resolve()
+      })
+    })
+  }
+
+  /**
+   * @description: 提交驳回
+   * @param {*}
+   * @return {*}
+   */
+  // TODO:
+  submitHandler() {
+    const { data } = this.state
+    console.log(data)
+    return new Promise((resolve) => {
+      setTimeout(() => {
+        resolve()
+      }, 2000)
+    })
+  }
+
+  render() {
+    const title = this.props.navigation.getParam('title', '骨科智慧仓')
+    const { data, formItems } = this.state
+
+    return (
+      <View style={g(styles, 'container')}>
+        <Resolution.FixWidthView>
+          <Header
+            title={title}
+            backCallback={() => {
+              this.props.navigation.goBack()
+            }}
+          />
+
+          {/* form表单 */}
+          <Form
+            fields={formItems}
+            data={data}
+            onChange={this.setData}
+            ref={ref => (this.formRef = ref)}
+            submitHandler={this.submitHandler}
+          />
+        </Resolution.FixWidthView>
+      </View>
+    )
+  }
+}
+
+export default Reject

src/services/api.ts

+/*
+ * @FilePath: /BoneHouse_Business_APP/src/services/api.ts
+ * @Author: peii
+ * @Date: 2021-12-19 16:06:26
+ * @LastEditTime: 2021-12-19 18:38:12
+ * @LastEditors: peii
+ * @Vision: 1.0
+ * @Description: 未重构完全暂用的所有请求
+ */
+
+import { request } from './baseApi'
+
+const v = '/api/latest'
+
+export default {
+  /**
+   * 请求组织
+   * @returns
+   */
+  getOrganizations() {
+    return request({ url: `${v}/authorized_inventory/search` })
+  },
+
+  /**
+   * @description: 请求客户
+   * @param {*}
+   * @return {*}
+   */
+  getCustomers(data: { seller_code: string; org_code: string }) {
+    return request({ url: `${v}/sale/seller_customer/search`, data })
+  },
+
+  /**
+   * @description: 请求销售结算单
+   * @param {*}
+   * @return {*}
+   */
+  getSettlements(data: {
+    org_code: string
+    customer_code: string
+    settlement_number?: string
+    header_status?: string
+  }) {
+    return request({ url: `${v}/sale/settlement_header/search` })
+  },
+
+  /**
+   * @description: 结算单行
+   * @param {object} data
+   * @return {*}
+   */
+  getSettlementLines(data: { settlement_number: string; line_status: string }) {
+    return request({ url: `${v}/sale/settlement_line/search`, data })
+  },
+}

src/services/baseApi.ts

+/*
+ * @FilePath: /BoneHouse_Business_APP/src/services/baseApi.ts
+ * @Author: peii
+ * @Date: 2021-04-24 22:45:15
+ * @Vision: 1.0
+ * @Description:
+ *
+ * @Description: 未重构完全暂用的请求总方法
+ *
+ */
+// @ts-nocheck
+import * as R from 'ramda'
+import { isBlank, show, genPid } from '../utils/utils'
+import { stringify } from 'querystring'
+import store from '../../app/store/configureStore'
+
+interface RequestConfig {
+  url: string
+  method: string
+  data: any
+  headers: any
+  timeout: number
+  urlToken: boolean
+  needToken: boolean
+}
+
+let requestQueue = []
+
+/**
+ * @description: 总请求
+ * @param {Partial} args
+ * @return {*}
+ */
+export const request = (args: Partial<RequestConfig>) => {
+  const state = store.getState()
+  const token = state.login.token
+  const host = state.login.global_domain_config
+  const navigation = state.login.navigation
+
+  let cancel = null
+  let isCancel = false
+
+  const p = new Promise((resolve, reject) => {
+    cancel = () => {
+      isCancel = true
+      reject({ error_code: 400, error_msg: '取消' })
+    }
+
+    let options: any = {
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      method: R.propOr('get', 'method', args),
+      reTries: R.propOr(3, 'reTries', args),
+      needToken: R.propOr(true, 'needToken', args),
+      data: R.propOr({}, 'data', args),
+      ...args,
+    }
+
+    if (options.needToken && token) {
+      options.data.access_token = token
+      if (options.method.toUpperCase() === 'POST') {
+        const accessToken = 'access_token=' + token
+        options.url += R.ifElse(R.includes('?'), R.always('&' + accessToken), R.always('?' + accessToken))(options.url)
+      }
+    }
+    // args.data = transformObject(options.data, 'toLine')
+    args.data = options.data
+
+    options = R.cond([
+      [R.propEq('method', 'get'), () => R.assoc('url', args.url + '?' + stringify(args.data), options)],
+      [R.T, () => R.assoc('body', JSON.stringify(args.data), options)],
+    ])(options)
+
+    // 上传方式
+    if (options.headers['Content-Type'] === 'multipart/form-data') {
+      options.url += `?access_token=${token}`
+      options = R.assoc('body', options.data, options)
+    }
+
+    let requestTimes = 0
+    function doRequest() {
+      requestTimes += 1
+      console.log('请求URL:', host + options.url)
+      fetch(host + options.url, options)
+        .then(res => res.json())
+        .then(res => {
+          if (isCancel) return
+          console.log('返回结果: ', res)
+          R.ifElse(
+            fetchSuccess,
+            () => {
+              removeRequestByPid(pid)
+              resolve(res)
+            },
+            () => {
+              throw res
+            },
+          )(res)
+        })
+        .catch(e => {
+          if (isCancel) return
+          // 登录错误直接cancel掉
+          if (e.error_code === 41006) {
+            show(e.error_msg)
+            removeRequestByPid(pid)
+            R.map(p => {
+              p.cancel()
+            }, requestQueue)
+            requestQueue = []
+            navigation.navigate('LoginPage')
+            return
+          }
+          if (requestTimes < options.reTries) {
+            return doRequest()
+          }
+          failHandler(e, pid)
+        })
+    }
+
+    doRequest()
+  })
+
+  const pid = genPid()
+  requestQueue.push({ pid, p, cancel })
+  return p.catch(e => {
+    return e
+  })
+}
+
+const fetchSuccess = R.propEq('error_code', 0)
+
+const removeRequestByPid = pid => {
+  requestQueue = R.compose(R.remove(R.__, 1, requestQueue), R.findIndex(R.propEq('pid', pid)))(requestQueue)
+}
+
+const failHandler = async (err: any, pid) => {
+  R.ifElse(
+    isBlank,
+    () => {
+      show(`${err.status || ''} ${err.error}`)
+    },
+    () => {
+      show(err.error_msg)
+      removeRequestByPid(pid)
+    },
+  )(err.error_code)
+  return err
+}

yarn.lock

@@ -5628,6 +5628,11 @@ query-string@^6.4.2:
     split-on-first "^1.0.0"
     strict-uri-encode "^2.0.0"
 
+querystring@^0.2.1:
+  version "0.2.1"
+  resolved "https://rg.cnpmjs.org/querystring/download/querystring-0.2.1.tgz#40d77615bb09d16902a85c3e38aa8b5ed761c2dd"
+  integrity sha1-QNd2FbsJ0WkCqFw+OKqLXtdhwt0=
+
 querystringify@^2.1.1:
   version "2.2.0"
   resolved "https://registry.npm.taobao.org/querystringify/download/querystringify-2.2.0.tgz#3345941b4153cb9d082d8eee4cda2016a9aef7f6"