org

src/assets/styles/base.styl

@@ -29,10 +29,12 @@ hToR($color, opacity = 1)
 
 @keyframes slide-up
   from
-    -webkit-transform translate3d(0, 100%, 0)
-    transform translate3d(0, 100%, 0)
+    // -webkit-transform translate3d(0, 100%, 0)
+    // transform translate3d(0, 100%, 0)
+    translateY 100%
     visibility visible
 
   to
-    -webkit-transform translate3d(0, 0, 0)
-    transform translate3d(0, 0, 0)
+    // -webkit-transform translate3d(0, 0, 0)
+    // transform translate3d(0, 0, 0)
+    translateY 0

src/components/form/select-modal.styl

@@ -11,12 +11,10 @@
     width 100%
     height 100%
     background-color rgba(0, 0, 0, 0.5)
-    @extend .animated
-    animation-name slide-up
 
   &-content
     position absolute
     width 100%
-    height 400px
+    max-height 400px
     background-color foundation_color
     bottom 0

src/components/form/select-modal.tsx

@@ -8,8 +8,8 @@
  * @Revision:
  *
  */
-import React from 'react'
-import { View, Text, TouchableOpacity, ScrollView } from 'react-native'
+import React, { useEffect, useRef, useState } from 'react'
+import { View, Text, TouchableOpacity, ScrollView, Animated } from 'react-native'
 import { IOption } from 'bonehouse'
 import * as R from 'ramda'
 import { isBlank } from '../../utils/utils'
@@ -32,25 +32,67 @@ type IModalProps = {
   onClose: Function
 }
 
+/**
+ * @description: 动画函数
+ * @param {*} bottomAnim
+ * @param {*} bottom
+ * @param {*} opacityAnim
+ * @param {*} opacity
+ * @param {*} cb
+ * @return {*}
+ */
+function animated(bottomAnim, bottom, opacityAnim, opacity, cb) {
+  Animated.parallel([
+    Animated.timing(bottomAnim, {
+      toValue: bottom,
+      duration: 150,
+    }),
+    Animated.timing(opacityAnim, {
+      toValue: opacity,
+      duration: 150,
+    }),
+  ]).start(() => {
+    cb && cb()
+  })
+}
+
+/**
+ * @description: 选择器弹窗
+ * @param {IModalProps} props
+ * @return {*}
+ */
 export function SelectModal(props: IModalProps) {
   const { data = [], value, mask, onChange, visible, title, onClose } = props
+  const { width, height } = Resolution.get()
+
+  const [modalHeight, setModalHeight] = useState(height - store.headerHeight)
+  const [contentHeight, setContentHeight] = useState(400)
+  const bottom = useRef(new Animated.Value(-contentHeight)).current
+  const opacity = useRef(new Animated.Value(0)).current
+
+  useEffect(() => {
+    if (visible) {
+      animated(bottom, 0, opacity, 1)
+    }
+  }, [visible])
+
   if (!visible) return <></>
 
-  const { width, height } = Resolution.get()
+  console.log(data)
 
   return (
-    <View style={[g(styles, 'modal'), { width, height: height - store.headerHeight }]}>
+    <Animated.View style={[g(styles, 'modal'), { width, height: modalHeight, opacity: opacity }]}>
       {!!mask && (
         <TouchableOpacity
           style={g(styles, 'modal-mask')}
           activeOpacity={1}
           onPress={() => {
-            onClose()
+            animated(bottom, -contentHeight, opacity, 0, onClose)
           }}
         ></TouchableOpacity>
       )}
 
-      <View style={g(styles, 'modal-content')}>
+      <Animated.View style={[g(styles, 'modal-content'), { bottom, height: contentHeight }]}>
         {!!title && (
           <View style={g(styles, 'modal-hd')}>
             <Text style={g(styles, 'modal-header__text')}>{title}</Text>
@@ -69,13 +111,13 @@ export function SelectModal(props: IModalProps) {
                     onChange && onChange(option)
                   }}
                 >
-                  <Text>{option.label}</Text>
+                  <Text>{option.label}123123</Text>
                 </TouchableOpacity>
               )
             })}
           </View>
         </ScrollView>
-      </View>
-    </View>
+      </Animated.View>
+    </Animated.View>
   )
 }

src/components/form/select.tsx

@@ -61,6 +61,7 @@ export default class Select extends Component<IProps> {
     const required = isRequired(item)
     const val = getText(item, value)
 
+    console.log(item)
     return (
       <>
         <TouchableOpacity

src/components/modals/base/base.tsx

@@ -25,7 +25,8 @@ export default class BModal extends Component<IProps> {
 
   render() {
     let { title, visible, footerButtons, maskClosable = false } = this.props
-    if (visible) {
+    if (!visible) return <></>
+
     return (
       <Provider>
         <Modal
@@ -43,8 +44,5 @@ export default class BModal extends Component<IProps> {
         </Modal>
       </Provider>
     )
-    } else {
-      return <></>
-    }
   }
 }

src/inversify/index.ts

+/*
+ * @FilePath: /BoneHouse_Business_APP/src/inversify/index.ts
+ * @Author: peii
+ * @Date: 2021-04-29 16:38:54
+ * @Vision: 1.0
+ * @Description: DI
+ *
+ * @Revision:
+ *
+ */
 import 'reflect-metadata'
 import { Container } from 'inversify'
 import { TYPES } from './types'
@@ -5,6 +15,7 @@ import Service from '../services/service'
 import Store from '../stores/store'
 import System from '../stores/system'
 import User from '../stores/user'
+import Organization from '../stores/organization'
 
 const container = new Container({ defaultScope: 'Singleton' })
 
@@ -12,5 +23,6 @@ container.bind<Service>(TYPES.Service).to(Service)
 container.bind<Store>(TYPES.Store).to(Store)
 container.bind<System>(TYPES.SysStore).to(System)
 container.bind<User>(TYPES.UserStore).to(User)
+container.bind<Organization>(TYPES.OrgStore).to(Organization)
 
 export default container

src/inversify/types.ts

+/*
+ * @FilePath: /BoneHouse_Business_APP/src/inversify/types.ts
+ * @Author: peii
+ * @Date: 2021-04-29 16:38:54
+ * @Vision: 1.0
+ * @Description: DI 类型
+ *
+ * @Revision:
+ *
+ */
 export const TYPES = {
   Service: Symbol.for('service'),
   Store: Symbol.for('store'),
   SysStore: Symbol.for('system'),
   UserStore: Symbol.for('user'),
+  OrgStore: Symbol.for('organization'),
 }

src/pages/consume/consume.tsx

@@ -11,6 +11,7 @@
 import React, { Component } from 'react'
 import { View, Text, ScrollView } from 'react-native'
 import { inject, observer } from 'mobx-react'
+import { IOrganization } from 'bonehouse'
 import Form from '../../components/form'
 import { FieldType } from '../../enums'
 import Header from '../../components/header/header'
@@ -24,6 +25,10 @@ type IProps = {
     personName: string
   }
   sysStore: {}
+  orgStore: {
+    organizations: IOrganization[]
+    orgs: Function
+  }
 }
 
 class Consume extends Component<IProps> {
@@ -54,7 +59,7 @@ class Consume extends Component<IProps> {
         field: 'orgId',
         label: '组织',
         type: FieldType.SELECT,
-        options: [],
+        options: this.props.orgStore.orgs(),
         placeholder: '请选择',
         rules: [{ required: true, message: '请选择组织' }],
       },
@@ -89,4 +94,4 @@ class Consume extends Component<IProps> {
   }
 }
 
-export default inject('sysStore', 'userStore')(observer(Consume))
+export default inject('sysStore', 'userStore', 'orgStore')(observer(Consume))

src/pages/index/index.tsx

@@ -29,6 +29,9 @@ type IProps = {
   sysStore: {
     getSysProfile: Function
   }
+  orgStore: {
+    getOrganizations: Function
+  }
 }
 
 class Index extends Component<IProps> {
@@ -47,10 +50,11 @@ class Index extends Component<IProps> {
     this.props.store.setNavigation(this.props.navigation)
 
     setTimeout(() => {
-      const { navigation, store } = this.props
+      const { navigation, store, orgStore } = this.props
       !store.token && navigation.navigate('Signin')
 
       this.getSysProfile()
+      orgStore.getOrganizations()
     }, 0)
   }
 
@@ -118,4 +122,4 @@ class Index extends Component<IProps> {
   }
 }
 
-export default inject('store', 'sysStore')(observer(Index))
+export default inject('store', 'sysStore', 'orgStore')(observer(Index))

src/services/request.ts

@@ -26,6 +26,11 @@ interface RequestConfig {
 
 let requestQueue = []
 
+/**
+ * @description: 总请求
+ * @param {Partial} args
+ * @return {*}
+ */
 export const request = (args: Partial<RequestConfig>) => {
   const store = container.get<Store>(TYPES.Store)
   let cancel = null
@@ -44,13 +49,14 @@ export const request = (args: Partial<RequestConfig>) => {
       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) {
       options.data.accessToken = store.token
     }
-    args.data = transformObject(args.data, 'toLine')
+    args.data = transformObject(options.data, 'toLine')
 
     options = R.cond([
       [

src/services/service.ts

@@ -34,4 +34,12 @@ export default class Service {
       method: 'POST',
     })
   }
+
+  /**
+   * 获取组织
+   * @returns
+   */
+  getOrganizations() {
+    return request({ url: `${ctx}/authorized_inventory/search` })
+  }
 }

src/stores/index.ts

+/*
+ * @FilePath: /BoneHouse_Business_APP/src/stores/index.ts
+ * @Author: peii
+ * @Date: 2021-04-29 16:38:54
+ * @Vision: 1.0
+ * @Description: 总仓库
+ *
+ * @Revision:
+ *
+ */
 import container from '../inversify'
 import { TYPES } from '../inversify/types'
 import { AsyncStorage } from 'react-native'
@@ -6,6 +16,7 @@ import { create } from 'mobx-persist'
 const store = container.get<any>(TYPES.Store)
 const sysStore = container.get<any>(TYPES.SysStore)
 const userStore = container.get<any>(TYPES.UserStore)
+const orgStore = container.get<any>(TYPES.OrgStore)
 
 const hydrate = create({
   storage: AsyncStorage,
@@ -16,5 +27,6 @@ const hydrate = create({
 hydrate('store', store)
 hydrate('sysStore', sysStore)
 hydrate('userStore', userStore)
+hydrate('orgStore', orgStore)
 
-export default { store, sysStore, userStore }
+export default { store, sysStore, userStore, orgStore }

src/stores/organization.ts

+/*
+ * @FilePath: /BoneHouse_Business_APP/src/stores/organization.ts
+ * @Author: peii
+ * @Date: 2021-04-29 19:30:03
+ * @Vision: 1.0
+ * @Description: 组织结构store
+ *
+ * @Revision:
+ *
+ */
+
+import { observable, action, runInAction, toJS, flow } from 'mobx'
+import { persist } from 'mobx-persist'
+import { injectable, inject } from 'inversify'
+import Service from '../services/service'
+import { IOrganization } from 'bonehouse'
+import * as R from 'ramda'
+import { isBlank } from '../utils/utils'
+import { TYPES } from '../inversify/types'
+
+@injectable()
+export default class Organization {
+  @inject(TYPES.Service) service!: Service
+
+  @persist @observable organizations: IOrganization[] = []
+
+  @persist @observable inventories = []
+
+  orgs(): IOrganization[] {
+    return R.map(
+      R.applySpec({
+        label: R.prop('orgName'),
+        value: R.prop('orgCode'),
+      }) as any,
+    )(this.organizations as any) as any
+  }
+
+  /**
+   * @description: 获取组织
+   * @return {*}
+   */
+  getOrganizations = flow(function* (this: Organization) {
+    const res = yield this.service.getOrganizations()
+    this.organizations = res.data.organizations
+    this.inventories = res.data.inventories
+  })
+}

types/global.ts

@@ -53,4 +53,9 @@ declare module 'bonehouse' {
     rules?: IRule[]
     disabled?: boolean
   }
+
+  export type IOrganization = {
+    orgName: string
+    orgCode: string
+  }
 }