消耗明细样式

src/pages/consume/consumables.styl

@@ -26,3 +26,35 @@
     height @width
     margin-right 5px
     margin-left 5px
+
+.list
+  padding 20px
+  background-color home_background_color
+
+  &-item
+    width 100%
+    background-color #fff
+    padding 10px
+    @extend .row
+
+.info-item
+  @extend .row
+
+  &__text
+    font-size third_text_size
+    color list_one_light_color
+    font-family font_family_regular
+
+  &__key
+    width 65px
+    text-align justify
+
+  &__code
+    font-size second_text_size
+    color list_one_color
+    font-family font_family_semibold
+
+  &__sub-text
+    font-size third_text_size
+    color list_thr_color
+    font-family font_family_regular

src/pages/consume/consumables.tsx

@@ -13,6 +13,7 @@ import { View, Text, ScrollView, Image, TextInput, FlatList } from 'react-native
 import { inject, observer } from 'mobx-react'
 import { IFormField, ISurgeryCollectLine } from 'bonehouse'
 import * as R from 'ramda'
+import dayjs from 'dayjs'
 import Checkbox from '../../components/common/checkbox'
 import Select from './select'
 import Input from './input'
@@ -25,17 +26,16 @@ type IProps = {
     orderId: string
     getOrderLines: Function
     orderLines: ISurgeryCollectLine[]
+    loading: boolean
   }
 }
 
 type IState = {
-  loading: boolean
   lines: ISurgeryCollectLine[]
 }
 
 class Consumables extends Component<IProps, IState> {
   state = {
-    loading: false,
     lines: [],
     mainColumns: [
       {
@@ -67,10 +67,12 @@ class Consumables extends Component<IProps, IState> {
       {
         label: '生产日期',
         field: 'productionDate',
+        type: 'date',
       },
       {
         label: '过期日期',
         field: 'expirationDate',
+        type: 'date',
       },
     ],
   }
@@ -112,14 +114,19 @@ class Consumables extends Component<IProps, IState> {
     return (
       <View style={g(styles, 'list-item')}>
         <Checkbox checked={false} />
+
         <View style={g(styles, 'list-item__info')}>
           <View style={g(styles, 'list-item__info-main')}>
-            <Text>{item.manufacturerProductCode || '无厂家产品代码'}</Text>
+            <Text style={g(styles, 'info-item__code')}>
+              {item.manufacturerProductCode || '无厂家产品代码'}
+            </Text>
             {mainColumns.map(col => {
               return (
                 <View style={g(styles, 'info-item')} key={col.field}>
-                  <Text>{col.label}</Text>
-                  <Text>{R.propOr('无', col.field, item)}</Text>
+                  <Text style={g(styles, 'info-item__key', 'info-item__text')}>{col.label}:</Text>
+                  <Text style={g(styles, 'info-item__text')}>
+                    {R.propOr('无', col.field, item)}
+                  </Text>
                 </View>
               )
             })}
@@ -128,8 +135,14 @@ class Consumables extends Component<IProps, IState> {
             {subColumns.map(col => {
               return (
                 <View style={g(styles, 'info-item')} key={col.field}>
-                  <Text>{col.label}</Text>
-                  <Text>{R.propOr('无', col.field, item)}</Text>
+                  <Text style={g(styles, 'info-item__sub-text', 'info-item__key')}>
+                    {col.label}:
+                  </Text>
+                  <Text style={g(styles, 'info-item__sub-text')}>
+                    {R.compose(d => {
+                      return (d && dayjs(d).format('YYYY-MM-DD')) || '无'
+                    }, R.prop(col.field))(item)}
+                  </Text>
                 </View>
               )
             })}
@@ -141,6 +154,7 @@ class Consumables extends Component<IProps, IState> {
 
   render() {
     const { lines } = this.state
+    const { loading } = this.props.consumeStore
 
     return (
       <View style={g(styles, 'container')}>
@@ -166,6 +180,8 @@ class Consumables extends Component<IProps, IState> {
           </View>
         </View>
 
+        {loading && <Text>加载中</Text>}
+
         {/* 借货单行列表 */}
         <FlatList
           renderItem={this._renderItem.bind(this)}

src/stores/consume.ts

@@ -28,6 +28,8 @@ export default class Consume {
 
   @observable _orderLines: { [key: string]: ISurgeryCollectLine[] } = {}
 
+  @observable loading = false
+
   /**
    * @description: 借货订单列表
    * @param {string} sellerCode
@@ -116,12 +118,14 @@ export default class Consume {
    * @return {*}
    */
   getOrderLines = flow(function* (this: Consume, surgeryCollectNumber: string) {
+    this.loading = true
     const res = yield this.service.getCollectOrderLines({
       surgeryCollectNumber,
       filterNoneFlag: 'Y',
     })
+    this.loading = false
     this._orderLines[surgeryCollectNumber] = R.compose(
-      R.filter(R.propEq('raisedConsume', 'Y')),
+      R.reject(R.propEq('raisedConsume', 'Y')),
       R.pathOr([], ['data', 'lines']),
     )(res)
   })