filter radio

71810a43 · peii · 072092dd · 71810a43 · 71810a43 · 71810a43
Commit 71810a43 authored Dec 23, 2021 by peii
Showing with 141 additions and 14 deletions
src/components/form/index.styl
src/components/form/radio-filter.tsx
src/components/form/radio.tsx
src/components/modals/filter/filter.tsx
src/pages/settlement/collection.tsx
src/pages/settlement/components/filter.tsx
src/pages/settlement/index.tsx
--- a/src/components/form/index.styl
+++ b/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
--- a/src/components/form/radio-filter.tsx
+++ b/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>
+    )
+  }
+}
--- a/src/components/form/radio.tsx
+++ b/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'

--- a/src/components/modals/filter/filter.tsx
+++ b/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)
  }

--- 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-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 => ({})

--- a/src/pages/settlement/components/filter.tsx
+++ b/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)
--- 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 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.status = 'ENTERED'
-    // args.header_status = 'ENTERED'
    const res = await api.getSettlements(args)
    this.setState({ loading: false })