图片上传表单

src/components/form/image.styl

+@import '../../assets/styles/base.styl'
+@import '../../assets/styles/variable.styl'
+
+.image
+  margin-bottom 20px
+
+  &-title
+    color rgba(182, 182, 182, 100)
+    font-size 17px
+    font-family font_family_regular
+    margin-bottom 10px
+
+  &-bd
+    width 378px
+    height 172px
+    background-color rgba(255, 255, 255, 1)
+    padding 16px
+
+    &__inner
+      width 378px
+      flex-direction row
+      flex-wrap wrap
+      padding-bottom 16px
+
+  &-box
+    width 56px
+    height @width
+    border-radius 6px
+    background-color rgba(255, 255, 255, 1)
+    border 1px solid rgba(221, 221, 221, 1)
+    margin-bottom 15px
+    margin-right 15px
+    @extend .center
+    @extend .middle
+
+    &__remove
+      position absolute
+      right -10px
+      top -10px
+
+      &-icon
+        width 20px
+        height @width
+
+    &__touch
+      width 54px
+      height 54px
+
+  &-plus
+    font-size 50px
+    line-height 54px
+    color rgba(221, 221, 221, 1)
+    font-weight 200
+
+  &-img
+    width 54px
+    height 54px
+    border-radius 6px

src/components/form/image.tsx

+import React, { Component } from 'react'
+import {
+  View,
+  Text,
+  Image,
+  TouchableOpacity,
+  ScrollView,
+  Alert,
+  Linking,
+  Platform,
+} from 'react-native'
+import { IFormField, IOption } from 'bonehouse'
+import * as R from 'ramda'
+import ImagePicker from 'react-native-image-picker'
+import Toast, { Positions } from 'react-native-root-toast'
+import { isBlank, show, isRequired, isNotBlank, g } from '../../utils/utils'
+import styles from './image.styl'
+import Container from '../../inversify'
+import { TYPES } from '../../inversify/types'
+import Service from '../../services/service'
+
+const service: Service = Container.get(TYPES.Service)
+
+type IProps = {
+  item: IFormField
+  value: string[]
+  onChange: Function
+}
+
+export default class ImageForm extends React.Component<IProps> {
+  state = {
+    options: {
+      title: '选择图片',
+      cancelButtonTitle: '取消',
+      takePhotoButtonTitle: '拍照',
+      chooseFromLibraryButtonTitle: '相册',
+      cameraType: 'back',
+      mediaType: 'photo',
+      videoQuality: 'high',
+      durationLimit: 10,
+      maxWidth: 720,
+      maxHeight: 1280,
+      aspectX: 2,
+      aspectY: 1,
+      quality: 1,
+      angle: 0,
+      allowsEditing: false,
+      noData: false,
+      storageOptions: {
+        skipBackup: true,
+        path: 'Wisdom', // 存储本地地址
+      },
+    },
+    urls: [],
+  }
+
+  constructor(props) {
+    super(props)
+    this.onPickImageHandler = this.onPickImageHandler.bind(this)
+  }
+
+  /**
+   * @description: 点击添加图标
+   * @param {*}
+   * @return {*}
+   */
+  onPickImageHandler() {
+    const { options } = this.state
+
+    ImagePicker.showImagePicker(options, async res => {
+      if (res.didCancel) return
+
+      if (res.error) {
+        const errMsgs = ['Camera permissions not granted', 'Photo library permissions not granted']
+        const errTips = [
+          'APP需要使用相机，请打开相机权限允许APP使用',
+          'APP需要使用相册，请打开相册权限允许APP使用',
+        ]
+
+        for (const [idx, msg] of Object.entries(errMsgs)) {
+          if (R.indexOf(res.error, msg) > -1) {
+            Alert.alert('提示信息', errTips[idx], [
+              {
+                text: '设置',
+                onPress: () => {
+                  Linking.openURL('app-settings:').catch(err => console.log('error', err))
+                },
+              },
+              {
+                text: '取消',
+              },
+            ])
+            return
+          }
+        }
+        return show(res.error)
+      }
+
+      let source = res.uri
+      if (Platform.OS === 'ios') {
+        source = res.uri.replace('file://', '')
+        !res.fileName && (res.fileName = new Date().getTime() + '.heic')
+      }
+      const formData = new FormData()
+      let file = { uri: source, type: 'multipart/form-data', name: res.fileName }
+      formData.append('file', file)
+      try {
+        const loading = Toast.show('上传中', { duration: 60000, position: Toast.positions.CENTER })
+        const result = await service.uploadImg(formData)
+        Toast.hide(loading)
+
+        let value = this.props.value || []
+        value = R.append(result.data.url, value)
+        this.props.onChange(this.props.item.field, value)
+
+        let { urls } = this.state
+        urls = R.append(source, urls)
+        this.setState({ urls })
+      } catch (error) {
+        Toast.hide(loading)
+      }
+    })
+  }
+
+  /**
+   * @description: 删除单项
+   * @param {*} idx
+   * @return {*}
+   */
+  removeHandler(idx) {
+    let { value, onChange, item } = this.props
+    let { urls } = this.state
+
+    urls = R.remove(idx, 1, urls)
+    value = R.remove(idx, 1, value)
+    this.setState({ urls })
+
+    onChange && onChange(item.field, value)
+  }
+
+  render() {
+    const { item, value } = this.props
+    const { urls } = this.state
+
+    return (
+      <View style={g(styles, 'image')}>
+        <Text style={g(styles, 'image-title')}>{item.label}</Text>
+
+        <ScrollView style={g(styles, 'image-bd')}>
+          <View style={g(styles, 'image-bd__inner')}>
+            {isNotBlank(urls) &&
+              urls.map((url, idx) => {
+                return (
+                  <View style={g(styles, 'image-box')} key={url}>
+                    <TouchableOpacity style={g(styles, 'image-box__touch')}>
+                      <Image source={{ uri: url }} style={g(styles, 'image-img')} />
+                    </TouchableOpacity>
+                    <TouchableOpacity
+                      style={g(styles, 'image-box__remove')}
+                      onPress={() => {
+                        this.removeHandler(idx)
+                      }}
+                    >
+                      <Image
+                        source={require('../../assets/images/close_err_icon.png')}
+                        style={g(styles, 'image-box__remove-icon')}
+                      />
+                    </TouchableOpacity>
+                  </View>
+                )
+              })}
+
+            <TouchableOpacity
+              style={g(styles, 'image-box')}
+              activeOpacity={0.7}
+              onPress={() => {
+                this.onPickImageHandler()
+              }}
+            >
+              <Text style={g(styles, 'image-plus')}>+</Text>
+            </TouchableOpacity>
+          </View>
+        </ScrollView>
+      </View>
+    )
+  }
+}

src/components/form/index.styl

@@ -68,3 +68,24 @@
 
 .red
   color #f00
+
+.submit-btn
+  width 343px
+  height 52px
+  border-radius 9px
+  background-color primary_color
+  justify-content center
+  align-items center
+  align-self center
+  margin-bottom 30px
+
+  &__disabled
+    background-color #BBBBBB
+
+  &__text
+    color rgba(255, 255, 255, 100)
+    font-size 17px
+    font-family font_family_semibold
+
+    &__disabled
+      color rgba(255, 255, 255, 0.5)

src/components/form/index.tsx

@@ -9,12 +9,13 @@
  *
  */
 import React, { Component } from 'react'
-import { View, Text, ScrollView, SafeAreaView } from 'react-native'
+import { View, Text, ScrollView, SafeAreaView, TouchableOpacity } from 'react-native'
 import { IFormField } from 'bonehouse'
 import { FieldType } from '../../enums'
 import Select from './select'
 import Input from './input'
 import DatePicker from './date'
+import ImageForm from './image'
 import { g } from '../../utils/utils'
 import Consumables from '../../pages/consume/selected-consumables'
 import styles from './index.styl'
@@ -29,6 +30,7 @@ const formComponents = {
   [FieldType.SELECT]: Select,
   [FieldType.TEXT]: Input,
   [FieldType.DATE]: DatePicker,
+  [FieldType.IMAGE]: ImageForm,
 }
 
 export default class Form extends Component<IProps> {
@@ -60,6 +62,7 @@ export default class Form extends Component<IProps> {
   render() {
     const { fields = [], data = {} } = this.props
     const { scrollable, modal } = this.state
+    const disabled = false
 
     return (
       <View style={g(styles, 'container')}>
@@ -85,8 +88,20 @@ export default class Form extends Component<IProps> {
               )
             })}
 
-            {/* TODO: */}
-            {/* <Consumables /> */}
+            <TouchableOpacity
+              style={g(styles, { 'submit-btn': true, 'submit-btn__disabled': disabled })}
+              disabled={disabled}
+              activeOpacity={0.8}
+            >
+              <Text
+                style={g(styles, {
+                  'submit-btn__text': true,
+                  'btn-primary__text__disabled': disabled,
+                })}
+              >
+                提交
+              </Text>
+            </TouchableOpacity>
           </View>
         </ScrollView>
 

src/pages/consume/consume.tsx

@@ -20,6 +20,7 @@ import Header from '../../components/header/header'
 import { g, getFormItem, isBlank, isNotBlank, show } from '../../utils/utils'
 import Consumables from './components/selected-consumables'
 import styles from './consume.styl'
+import { Toast } from '@ant-design/react-native'
 
 type IProps = {
   store: {}

src/services/request.ts

@@ -22,6 +22,9 @@ interface RequestConfig {
   method: string
   data: any
   headers: any
+  timeout: number
+  urlToken: boolean
+  needToken: boolean
 }
 
 let requestQueue = []
@@ -61,11 +64,17 @@ export const request = (args: Partial<RequestConfig>) => {
     options = R.cond([
       [
         R.propEq('method', 'get'),
-        R.applySpec({ url: () => args.url + '?' + stringify(args.data) }),
+        () => R.assoc('url', args.url + '?' + stringify(args.data), options),
       ],
       [R.T, () => R.assoc('body', JSON.stringify(args.data), options)],
     ])(options)
 
+    // 上传方式
+    if (options.headers['Content-Type'] === 'multipart/form-data') {
+      options.url += `?access_token=${store.token}`
+      options = R.assoc('body', options.data, options)
+    }
+
     let requestTimes = 0
     function doRequest() {
       requestTimes += 1

src/services/service.ts

@@ -66,7 +66,8 @@ export default class Service {
    */
   getCollectOrders(data: {
     orgCode: string
-    sellerCode: string
+    sellerCode?: string
+    departmentCode?: string
     customerCode: string
     collectHeaderStatus: string
   }) {
@@ -78,7 +79,24 @@ export default class Service {
    * @param {*} data
    * @return {*}
    */
-  getCollectOrderLines(data: {surgeryCollectNumber: string}) {
+  getCollectOrderLines(data: { surgeryCollectNumber: string }) {
     return request({ url: `${ctx}/surgery/collected_order_line/search`, data })
   }
+
+  /**
+   * @description: 图片上传
+   * @param {FormData} data
+   * @return {*}
+   */
+  uploadImg(data: FormData) {
+    return request({
+      url: `${ctx}/dingding/upload_media`,
+      headers: { 'Content-Type': 'multipart/form-data' },
+      method: 'POST',
+      data,
+      timeout: 300000,
+      urlToken: true,
+      needToken: false,
+    })
+  }
 }