filter radio

src/components/form/index.styl

@@ -121,3 +121,40 @@
 
 .ml10
   margin-left 10px
+
+.box
+  &-item
+    flex-direction column
+    height auto
+
+  &-radio
+    @extend .row
+    flex 1
+    justify-content flex-start
+    flex-wrap wrap
+    margin-top 10px
+
+    &__item
+      border-color #ddd
+      border-width 1px
+      padding 6px 12px
+      margin-right 8px
+      margin-bottom 8px
+      background-color #fff
+
+      &-active
+        activeColor = #a8d4ff
+        background-color activeColor
+        border-color activeColor
+
+      &-image
+        position absolute
+        right 0
+        bottom 0
+
+      &-text
+        @extend .text
+        color second_text_color
+
+        &-active
+          color primary_color

src/components/form/radio-filter.tsx

+/*
+ * @FilePath: /BoneHouse_Business_APP/src/components/form/radio-filter.tsx
+ * @Author: peii
+ * @Date: 2021-06-06 16:24:05
+ * @Vision: 1.0
+ * @Description: 过滤Radio组件
+ *
+ * @Revision:
+ *
+ */
+// @ts-nocheck
+
+import React, { Component } from 'react'
+import { View, Text, Image, TouchableOpacity } from 'react-native'
+import { IFormField, IOption } from 'bonehouse'
+import * as R from 'ramda'
+import { isBlank, show, isNotBlank, g } from '../../utils/utils'
+import { FieldType } from '../../enums'
+import { Title } from './common'
+import styles from './index.styl'
+
+type IProps = {
+  item: IFormField
+  data: any
+  value: any
+}
+
+export default class BoxRadio extends Component<IProps> {
+  shouldComponentUpdate(nextProps: IProps): boolean {
+    if (nextProps.value !== this.props.value) {
+      return true
+    }
+    return false
+  }
+
+  render() {
+    const { item, value, onChange, type = 'radio' } = this.props
+
+    return (
+      <View style={g(styles, 'box-item')}>
+        <Title item={item} style={{ alignSelf: 'flex-left' }} />
+
+        <View style={g(styles, 'box-radio')}>
+          {item.options &&
+            item.options.map(option => {
+              const active = R.includes(option.value, value || '')
+
+              return (
+                <TouchableOpacity
+                  style={g(styles, { 'box-radio__item': true, 'box-radio__item-active': active })}
+                  key={option.value}
+                  activeOpacity={0.8}
+                  onPress={() => {
+                    if (value === option.value) return
+                    onChange(item.field, option.value)
+                  }}
+                >
+                  {active && (
+                    <Image
+                      style={g(styles, 'box-radio__item-image')}
+                      source={require('../../assets/images/his_ord_sel.png')}
+                    ></Image>
+                  )}
+                  <Text style={g(styles, { 'box-radio__item-text': true, 'box-radio__item-text-active': active })}>
+                    {option.label}
+                  </Text>
+                </TouchableOpacity>
+              )
+            })}
+        </View>
+      </View>
+    )
+  }
+}

src/components/form/radio.tsx

 /*
- * @FilePath: /BoneHouse_Hospital_APP/src/components/form/radio.tsx
+ * @FilePath: /BoneHouse_Business_APP/src/components/form/radio.tsx
  * @Author: peii
  * @Date: 2021-06-06 16:24:05
  * @Vision: 1.0
@@ -8,6 +8,8 @@
  * @Revision:
  *
  */
+// @ts-nocheck
+
 import React, { Component } from 'react'
 import { View, Text, Image, TouchableOpacity } from 'react-native'
 import { IFormField, IOption } from 'bonehouse'

src/components/modals/filter/filter.tsx

@@ -2,7 +2,7 @@
  * @FilePath: /BoneHouse_Business_APP/src/components/modals/filter/filter.tsx
  * @Author: peii
  * @Date: 2021-12-19 10:49:42
- * @LastEditTime: 2021-12-20 15:06:08
+ * @LastEditTime: 2021-12-23 16:04:12
  * @LastEditors: peii
  * @Vision: 1.0
  * @Description: 过滤弹窗
@@ -18,7 +18,7 @@ import { FieldType } from '../../../enums'
 import { TopModal } from '../base/top'
 import FormInput from '../../form/input'
 import FormSelect from '../../form/select'
-import FormRadio from '../../form/radio'
+import FormRadio from '../../form/radio-filter'
 import styles from './filter.styl'
 
 type IProps = {
@@ -41,7 +41,7 @@ const FormComponents = {
   [FieldType.RADIO]: FormRadio,
 }
 
-export default class Filter extends React.Component<IProps, IState> {
+export default class FilterModal extends React.Component<IProps, IState> {
   constructor(props) {
     super(props)
   }

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-21 15:55:57
+ * @LastEditTime: 2021-12-23 15:58:56
  * @LastEditors: peii
  * @Vision: 1.0
  * @Description: 结算汇总
@@ -52,11 +52,23 @@ class SettlementCollection extends React.Component<IProps, IState> {
         label: '结算单号',
         type: FieldType.TEXT,
       },
+      {
+        field: 'status',
+        label: '状态',
+        type: FieldType.RADIO,
+        options: R.map(
+          R.applySpec({
+            value: R.prop('value_code'),
+            label: R.prop('value_name'),
+          }),
+        )(this.props.status),
+      },
     ],
   }
 
   componentDidMount() {
     this.toggleModalVisible()
+    console.log(this.props.status)
   }
 
   toggleModalVisible(): void {
@@ -113,7 +125,9 @@ class SettlementCollection extends React.Component<IProps, IState> {
   }
 }
 
-const mapStateToProps = state => ({})
+const mapStateToProps = state => ({
+  status: state.settlement.headerStatus,
+})
 
 const mapDispatchToProps = dispatch => ({})
 

src/pages/settlement/components/filter.tsx

@@ -2,7 +2,7 @@
  * @FilePath: /BoneHouse_Business_APP/src/pages/settlement/components/filter.tsx
  * @Author: peii
  * @Date: 2021-12-19 10:49:42
- * @LastEditTime: 2021-12-21 17:35:08
+ * @LastEditTime: 2021-12-23 16:04:58
  * @LastEditors: peii
  * @Vision: 1.0
  * @Description: 过滤弹窗
@@ -17,7 +17,7 @@ import { IFormField } from 'bonehouse'
 import api from '../../../services/api'
 import { isNotBlank, g, getFormItem } from '../../../utils/utils'
 import { FieldType } from '../../../enums'
-import Filter from '../../../components/modals/filter/filter'
+import FilterModal from '../../../components/modals/filter/filter'
 import styles from './filter.styl'
 
 type IProps = {
@@ -35,7 +35,7 @@ type IState = {
   formItems: IFormField[]
 }
 
-class FilterModal extends React.Component<IProps, IState> {
+class Filter extends React.Component<IProps, IState> {
   constructor(props) {
     super(props)
     this.onClose = this.onClose.bind(this)
@@ -61,6 +61,7 @@ class FilterModal extends React.Component<IProps, IState> {
             label: this.props.userInfo.person_name,
           },
         ],
+        rules: [{ required: true, message: '请选择客户' }],
       },
       {
         field: 'customer_code',
@@ -216,7 +217,7 @@ class FilterModal extends React.Component<IProps, IState> {
     const { visible } = this.props
 
     return (
-      <Filter
+      <FilterModal
         style={g(styles, 'filter-modal')}
         visible={visible}
         data={data}
@@ -237,4 +238,4 @@ const mapStateToProps = state => ({
 
 const mapDispatchToProps = dispatch => ({})
 
-export default connect(mapStateToProps, mapDispatchToProps)(FilterModal)
+export default connect(mapStateToProps, mapDispatchToProps)(Filter)

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 10:58:21
+ * @LastEditTime: 2021-12-23 15:16:06
  * @LastEditors: peii
  * @Vision: 1.0
  * @Description: 结算确认首页
@@ -61,8 +61,7 @@ class Settlement extends React.Component<IProps, IState> {
   async getData(args): void {
     this.setState({ loading: true })
     // 确认页面只过滤出已输入的那些
-    // TODO:
-    // args.header_status = 'ENTERED'
+    args.status = 'ENTERED'
 
     const res = await api.getSettlements(args)
     this.setState({ loading: false })