feat: 客户可在页面进行查找选择

app/Router.js

@@ -26,6 +26,7 @@ import BarCodePage from './containers/common/BarCodePage'
 
 // 下单
 import SelfOrder from '../src/pages/order/self'
+import Customer from '../src/pages/customer/index'
 
 // 结算
 import Settlement from '../src/pages/settlement/index'
@@ -79,6 +80,7 @@ const Router = createAppContainer(
       TransSearchPage: { screen: TransSearchPage },
       HistoricalOrderPage: { screen: HistoricalOrderPage },
       LineOrderPage: { screen: LineOrderPage },
+      Customer: { screen: Customer },
 
       SubSuccPage: { screen: SubSuccPage },
       BarCodePage: { screen: BarCodePage },

app/containers/selfOrder/SelfOrderPage.js

@@ -1160,20 +1160,37 @@ class SelfOrderPage extends Component {
   // 客户名称 点击
   handleCustomerCheck(curData) {
     let that = this
-    if (this.judgeOrgIsNull()) {
-      that.setState(
-        {
+    if (!this.judgeOrgIsNull()) return
+    this.setState({
       currentTitle: curData.title,
       currentItem: {
         name: curData.name,
         value: curData.value,
       },
+    })
+    const { listOptionData } = this.state
+    this.props.navigation.navigate('Customer', {
+      title: '选择客户',
+      showItems: [
+        {
+          key: 'customer_code',
+          label: 'customer_name',
         },
-        () => {
-          that.getCustomerData()
+      ],
+      org_code: listOptionData[1].value,
+      seller_code: listOptionData[0].value,
+      customer_code: listOptionData[2].value,
+      callback: customer => {
+        if (isBlank(customer)) return
+
+        this.setState({localCustomersOption: [customer]}, () => {
+          this.handleCallBack({
+            name: customer.customer_name,
+            value: customer.customer_code,
+          }, listOptionData[2].title)
+        })
       },
-      )
-    }
+    })
   }
   // 获取客户名称
   getCustomerData() {

src/components/checkbox/checkbox.tsx

@@ -14,7 +14,7 @@ import { View, Text, TouchableOpacity, Image } from 'react-native'
 import { isBlank, g } from '../../utils/utils'
 import styles from './checkbox.styl'
 
-export const Checkbox = ({ checked, indeterminate, onChange, activeOpacity = 0.5, children, style }) => {
+export const Checkbox = ({ checked, indeterminate, onChange, activeOpacity = 0.5, children, style, pressable = true }) => {
   const [check, setCheck] = useState(checked)
   const [indeter, setIndeter] = useState(indeterminate)
 
@@ -24,6 +24,8 @@ export const Checkbox = ({ checked, indeterminate, onChange, activeOpacity = 0.5
   }, [checked, indeterminate])
 
   const pressHandler = () => {
+    if (!pressable) return
+
     if (check) {
       setCheck(false)
       setIndeter(false)

src/components/page_select/select.styl

+@import '../../assets/styles/base.styl'
+@import '../../assets/styles/variable.styl'
+
+.search-bar
+  position relative
+  height 60px
+  margin-top -1px
+  padding 12px 15px
+  background-color primary_color
+
+.search-input
+  flex 1
+  height 100%
+  background-color #ffffff
+  padding 5px 10px
+  border-radius 4px
+
+.search-icon
+  position absolute
+  right 18px 
+  top 15px
+
+
+.list
+  flex-grow 1
+  margin-bottom 200px
+  &-inner
+    padding 15px
+
+.item
+  @extends .row
+  justify-content space-between
+  background-color #ffffff
+  padding 15px
+  margin-bottom 10px
+  border-radius 4px
+
+.index
+  color second_text_color
+  font-size second_text_size
+
+.info-box
+  flex-grow 1
+
+.info-item
+  @extends .row
+
+.loading
+  height 50%
+  @extends .center
+  @extends .middle
+

src/components/page_select/select.tsx

+/*
+ * @FilePath: /BoneHouse_Hospital_APP/src/components/page_select/select.tsx
+ * @Author: peii
+ * @Date: 2021-08-25 10:23:52
+ * @LastEditTime: 2021-08-25 10:45:37
+ * @LastEditors: peii
+ * @Vision: 1.0
+ * @Description: 页面选择组件
+ */
+// @ts-nocheck
+
+import React, { useState, useEffect } from 'react'
+import { View, Text, Image, FlatList, TextInput, TouchableOpacity } from 'react-native'
+import { g, isBlank, isNotBlank } from '../../utils/utils'
+import Empty from '../../components/empty/index'
+import Loading from '../../components/loading/index'
+import { Checkbox } from '../checkbox/checkbox'
+import styles from './select.styl'
+
+type IKey = { key: string; label: string }
+
+type IProps = {
+  list: any[]
+  keys: IKey[]
+  onSelect: Function
+  selectedItem: any
+  activeKey: string
+  titleKey: string
+  filterFun: Function
+  loading: boolean
+}
+
+export const PageSelect = ({
+  list,
+  keys,
+  selectedItem,
+  activeKey = 'key',
+  titleKey = 'key',
+  filterFun = () => {},
+  onSelect = () => {},
+  loading,
+}: IProps) => {
+  const [searchText, setSearchText] = useState('')
+  const [data, setData] = useState(list)
+
+  useEffect(() => {
+    const filterData = (filterFun && filterFun(list, searchText)) || list
+    setData(filterData)
+  }, [list, searchText])
+
+  return (
+    <View style={g(styles, 'list')}>
+      <View style={g(styles, 'search-bar')}>
+        <TextInput
+          style={g(styles, 'search-input')}
+          placeholder="搜索"
+          value={searchText}
+          onChangeText={text => setSearchText(text)}
+        />
+        <Image source={require('../../assets/images/search_icon.png')} style={g(styles, 'search-icon')} />
+      </View>
+
+      {loading ? (
+        <View style={g(styles, 'loading')}>
+          <Loading text='加载中'/>
+        </View>
+      ) : (
+        <FlatList
+          style={g(styles, 'list-inner')}
+          data={data}
+          renderItem={({ item, index }) => (
+            <Item
+              data={item}
+              keys={keys}
+              index={index}
+              onSelect={onSelect}
+              selectedItem={selectedItem}
+              activeKey={activeKey}
+              titleKey={titleKey}
+            />
+          )}
+          keyExtractor={item => item[activeKey]}
+          ListEmptyComponent={Empty}
+        ></FlatList>
+      )}
+    </View>
+  )
+}
+
+const Item = ({
+  data,
+  keys,
+  onSelect,
+  index,
+  selectedItem,
+  activeKey,
+  titleKey,
+}: {
+  keys: IKey[]
+  onSelect: Function
+}) => {
+  const [active, setActive] = useState(false)
+
+  useEffect(() => {
+    if (selectedItem && selectedItem[activeKey] === data[activeKey]) {
+      setActive(true)
+    } else {
+      setActive(false)
+    }
+  }, [selectedItem])
+
+  return (
+    <TouchableOpacity
+      style={g(styles, 'item')}
+      onPress={() => {
+        onSelect(data)
+      }}
+      activeOpacity={0.6}
+    >
+      <View style={g(styles, 'info-box')}>
+        <Text style={g(styles, 'index')}>
+          {index + 1}. {data[titleKey]}
+        </Text>
+
+        {keys &&
+          keys.map((item, index) => (
+            <View key={item + index} style={g(styles, 'info-item')}>
+              {!!item.label && <Text style={g(styles, 'key')}>{item.label} </Text>}
+              <Text style={g(styles, 'val')}>{data[item.key]}</Text>
+            </View>
+          ))}
+      </View>
+
+      <Checkbox checked={active} pressable={false} />
+    </TouchableOpacity>
+  )
+}

src/pages/customer/index.styl

+@import '../../assets/styles/base.styl'
+@import '../../assets/styles/variable.styl'
+
+.container
+  flex 1
+  background-color home_background_color
+
+.right-btn
+  width 100%
+  align-items flex-end
+
+.right-text
+  color #ffffff
+  text-align right
+  font-size first_text_size

src/pages/customer/index.tsx

+// @ts-nocheck
+import React, { Component } from 'react'
+import { View, TouchableOpacity, Text } from 'react-native'
+import { INavigation } from 'navigation'
+import { connect } from 'react-redux'
+import * as R from 'ramda'
+import Resolution from '../../components/common/Resolution'
+import Header from '../../components/header/header'
+import { g, isNotBlank } from '../../utils/utils'
+import api from '../../services/api'
+import { PageSelect } from '../../components/page_select/select'
+import styles from './index.styl'
+
+type IProps = {
+  url: string
+  navigation: INavigation
+  org_code: string
+  seller_code: string
+  customer_code: string
+}
+
+type IState = {
+  data: any[]
+  keys: any[]
+  loading: boolean
+  selectedItem: any
+}
+
+class CustomerSelectPage extends React.Component<IProps, IState> {
+  state = {
+    data: [],
+    keys: [
+      {
+        key: 'customer_name',
+        label: '客户',
+      },
+    ],
+    loading: false,
+    selectedItem: null,
+  }
+
+  componentDidMount() {
+    this.getCustomers()
+  }
+
+  async getCustomers() {
+    this.setState({ loading: true })
+    const { org_code, seller_code, customer_code } = this.props.navigation.state.params
+    const res = await api.getCustomers({ org_code, seller_code }).catch(() => {})
+    setTimeout(() => {
+      this.setState({ loading: false })
+    }, 200)
+    if (res.code !== 0) return
+
+    const data = R.pathOr([], ['data', 'customers'], res)
+
+    if (R.all(isNotBlank, [data, customer_code])) {
+      const item = R.find(R.propEq('customer_code', customer_code))(data)
+      if (isNotBlank(item)) {
+        this.setState({ selectedItem: item })
+      }
+    }
+
+    this.setState({ data })
+  }
+
+  filterFun(data, searchText) {
+    return R.filter(R.propSatisfies(R.includes(searchText), 'customer_name'))(data)
+  }
+
+  render(): React.ReactNode {
+    const { data, keys, selectedItem, loading } = this.state
+    const { navigation } = this.props
+    const title = navigation.getParam('title', '骨科智慧仓')
+
+    return (
+      <View style={g(styles, 'container')}>
+        <Resolution.FixWidthView>
+          <Header
+            title={title}
+            backCallback={() => {
+              navigation.goBack()
+            }}
+            back={true}
+          >
+            <TouchableOpacity style={g(styles, 'right-btn')} activeOpacity={0.8} onPress={() => {
+              const callback = navigation.state.params.callback
+              callback && callback(selectedItem)
+              navigation.goBack()
+            }}>
+              <Text style={g(styles, 'right-text')}>确认</Text>
+            </TouchableOpacity>
+          </Header>
+          <View style={g(styles, 'content')}>
+            <PageSelect
+              list={data}
+              keys={[]}
+              selectedItem={selectedItem}
+              activeKey="customer_code"
+              titleKey="customer_name"
+              filterFun={this.filterFun.bind(this)}
+              onSelect={selectedItem => this.setState({selectedItem})}
+              loading={loading}
+            />
+          </View>
+        </Resolution.FixWidthView>
+      </View>
+    )
+  }
+}
+
+const mapStateToProps = state => ({})
+
+export default connect(mapStateToProps)(CustomerSelectPage)