Skip to content

zhangzhonghua / BoneHouse_Business_APP

Go to a project
Commit de4dcb5c by Denglingling
Options

增加【器械消耗】模块需要的组件

parent 7f6c648e
Inline Side-by-side
Showing with 793 additions and 25 deletions
app/Router.js
......@@ -13,6 +13,7 @@ import ChooseProductPage from './containers/selfOrder/module/ChooseProductPage';
import EditStencilPage from './containers/selfOrder/module/EditStencilPage';
import SubSuccessPage from './containers/selfOrder/module/SubSuccessPage';
import EquipConsuPage from './containers/equipConsu/EquipConsuPage';
import ConsumDetailsPage from './containers/equipConsu//module/ConsumDetailsPage';
import QuickOrderPage from './containers/quickOrder/QuickOrderPage';
import TransOrderPage from './containers/transOrder/TransOrderPage';
import TransSearchPage from './containers/transOrder/module/TransSearchPage';
......@@ -26,6 +27,7 @@ const Router = createAppContainer(createStackNavigator({
EditStencilPage: {screen: EditStencilPage},
SubSuccessPage: {screen: SubSuccessPage},
EquipConsuPage: {screen: EquipConsuPage},
ConsumDetailsPage: {screen: ConsumDetailsPage},
QuickOrderPage: {screen: QuickOrderPage},
TransOrderPage: {screen: TransOrderPage},
TransSearchPage: {screen: TransSearchPage},
......
app/containers/equipConsu/EquipConsuPage.js
......@@ -326,9 +326,9 @@ class EquipConsuPage extends Component {
// 耗材明细 点击
handleConsumDetailCheck() {
console.warn('耗材明细------check')
// this.props.navigation.navigate('TransSearchPage', {
// title: '器械消耗 - 添加明细'
// })
this.props.navigation.navigate('ConsumDetailsPage', {
title: '器械消耗 - 添加明细'
})
}
// 添加图片 点击
......@@ -344,18 +344,6 @@ class EquipConsuPage extends Component {
// 返回备注以上的元素
renderListItem() {
let { listOptionData, dateModelPop } = this.state
let {userInfo:{ person_name }} = this.props
if(!isEmpty(person_name)) {
// this.setState({
// listOptionData: listOptionData.map(item => {
// if(item.title === '销售员') {
// item.name = person_name
// item.value = person_name
// }
// return item
// })
// })
}
return(
<View style={styles.list_cont}>
......@@ -366,7 +354,7 @@ class EquipConsuPage extends Component {
<CellTextStyle>
<AsteriskTextStyle>*</AsteriskTextStyle>
<TitleTextStyle>{'销售员'}</TitleTextStyle>
<ContInputTextStyle editable={false} defaultValue={listOptionData[0].value}></ContInputTextStyle>
<ContInputTextStyle editable={false} defaultValue={listOptionData[0].name}></ContInputTextStyle>
</CellTextStyle>
</TouchableOpacity>
</View>
......@@ -648,7 +636,7 @@ class EquipConsuPage extends Component {
{
state.listOptionData[12].isShowSub ?
<View style={list_common_item.detail_sub_inner}>
<ScrollView
{/* <ScrollView
style={list_common_item.detail_scroll}
onPress={() => {console.log('--触碰---')}}
onScrollBeginDrag={() => {console.log('--滚动---')}}
......@@ -659,7 +647,12 @@ class EquipConsuPage extends Component {
return this.renderConDeSubItem(item, index)
})
}
</ScrollView>
</ScrollView> */}
{
state.listOptionData[12].subOption.map((item, index) => {
return this.renderConDeSubItem(item, index)
})
}
</View> : null
}
</View> : null
......@@ -746,19 +739,12 @@ class EquipConsuPage extends Component {
style={styles.equip_main}
showsVerticalScrollIndicator={false}
>
<Text>'器械消耗'</Text>
{this.renderListItem()}
{this.renderRemarksItem()}
{this.renderConsumablesDetailsItem()}
{this.renderAddPicturesItem()}
</ScrollView>
</SafeAreaView>
<FooterBtnStyle
style={canSubFlag ? styles.sub_btn_pro : ''}
activeOpacity={canSubFlag ? .8 : 1}
......@@ -766,6 +752,9 @@ class EquipConsuPage extends Component {
textStyle= {styles.sub_btn}
onPress={() => this.handleSubmit()}
/>
</ScrollView>
</SafeAreaView>
</View>
);
}
......
app/containers/equipConsu/module/ConsumDetailsPage.js 0 → 100644
import React, { Component } from 'react';
import {
View,
Text,
StyleSheet,
SafeAreaView,
Image,
TextInput,
ScrollView,
TouchableOpacity,
FlatList
} from 'react-native';
import {
home_background_color,
promary_color,
safe_view,
list_common_item,
icon_style,
pxSize,
second_text_size,
promary_text_color,
font_family_regular
} from '../../../base/BaseStyle';
import StatusBarView from '../../common/StatusBarView';
import HeadBackItem from '../../common/HeadBackItem';
import DetailsModel from './DetailsModel';
class ConsumDetailsPage extends Component {
constructor(props) {
super(props);
this.state = {
searchValue: '',
conDetaOption: [{
"id": "0",
title: '人工髋关节假体-JS-HB ||| T',
tip1: '2001202001001774',
select: false
},{
"id": "1",
title: '人工髋关节假体-JS-HB ||| T2',
tip1: '2001202001001774',
select: false
},{
"id": "2",
title: '人工髋关节假体-JS-HB ||| T3',
tip1: '2001202001001774',
select: true
},{
"id": "3",
title: '人工髋关节假体-JS-HB ||| T4',
tip1: '2001202001001774',
select: true
},{
"id": "4",
title: '人工髋关节假体-JS-HB ||| T5',
tip1: '2001202001001774',
select: true
},{
"id": "5",
title: '人工髋关节假体-JS-HB ||| T6',
tip1: '2001202001001774',
select: true
},{
"id": "6",
title: '人工髋关节假体-JS-HB ||| T',
tip1: '2001202001001774',
select: false
},{
"id": "7",
title: '人工髋关节假体-JS-HB ||| T',
tip1: '2001202001001774',
select: false
},{
"id": "8",
title: '人工髋关节假体-JS-HB ||| T',
tip1: '2001202001001774',
select: false
},{
"id": "9",
title: '人工髋关节假体-JS-HB ||| T',
tip1: '2001202001001774',
select: false
}],
selectShowPopup: false, // 共计已选弹窗
localSelectOption: [], // 已选数据
}
}
// 取消选择
handleCelSelCheck(item, index) {
console.log('取消===cel:', item, index)
this.changeIsSelected(index, false)
}
// 确定选择
handleSubSelectedCheck(item, index) {
console.log('确定===sub:', item, index)
this.changeIsSelected(index, true)
}
// 修改是否选择
changeIsSelected(ind, selFlag) {
let {conDetaOption} = this.state
conDetaOption[ind].select = selFlag
let that = this
this.setState({
conDetaOption
},() => {
// let {conDetaOption} = this.state
console.log('conDetaOption---修改-', conDetaOption)
let tempArr = []
conDetaOption.forEach(item => {
if(item.select) {
tempArr.push(item)
}
})
that.setState({
localSelectOption: tempArr
}, () => {
console.log('this.localSelectOption--!!2--that====' , that.state.localSelectOption)
})
})
}
// 已选回调函数
detailsCallbak(subOpt) {
console.log('----回调:',subOpt)
// let {conDetaOption} = this.state
let tempOption = [...this.state.conDetaOption]
// 获取当前已选值
tempOption = tempOption.map(item => {
// 全部初始化
item.select = false
if(subOpt.length) {
subOpt.forEach(subIt => {
// 根据接口查看！！！！！！！！！！！！当前唯一值
if(subIt.id == item.id) {
item.select = true
}
})
}
return item
})
this.setState({
conDetaOption: tempOption
})
}
// 打开/关闭 共计已选弹窗
handleCloseSelectModal(show) {
this.setState({
selectShowPopup: show
})
}
// 点击 已选
handleSubSelected(show) {
console.warn('已选：666!!')
this.handleCloseSelectModal(true)
}
// 点击 确定耗材
handleSubmit(show) {
console.warn('确定耗材', this.props.navigation.navigate)
this.handleCloseSelectModal(false)
console.warn('携带数据，返回到自助下单') // 可存储于store中
}
// 返回搜索元素
renderSearchItem() {
return (
<View style={list_common_item.ser_cont}>
<TextInput
placeholder={'请输入搜索关键词'}
style={list_common_item.ser_text_input}
defaultValue={this.state.searchValue}
/>
<View style={list_common_item.ser_img_box}>
<Image source={require('../../../images/search_icon.png')} style={icon_style}/>
</View>
</View>
)
}
// 返回中间主要内容
renderContItem() {
// let {conDetaOption} = this.state
return (
<ScrollView
style={styles.cons_cont_scroll}
showsVerticalScrollIndicator={false}
>
<FlatList
style={styles.cons_cont}
keyExtractor={item => item.id}
data={this.state.conDetaOption}
extraData={this.state}
renderItem={ ({item, index}) => this.renderSubListItem(item, index) }
/>
</ScrollView>
)
}
// 返回每一列数据
renderSubListItem(item, index) {
return(
<View style={styles.cons_sub_list}>
<View style={styles.sub_list_lef}>
{
item.select ?
<TouchableOpacity
activeOpacity={.8}
style={styles.sub_icon_box}
onPress={() => this.handleCelSelCheck(item, index)}>
<Image style={icon_style} source={require('../../../images/radio_yes.png')} />
</TouchableOpacity>
: <TouchableOpacity
activeOpacity={.8}
style={styles.sub_icon_box}
onPress={() => this.handleSubSelectedCheck(item, index)}>
<Image style={icon_style} source={require('../../../images/radio_no.png')} />
</TouchableOpacity>
}
</View>
<View style={styles.sub_list_rig}>
<Text style={styles.rig_tit}>
{item.title}
</Text>
<Text style={styles.rig_ser}>
序列号：{item.tip1}
</Text>
</View>
</View>
)
}
// 返回底部按钮
renderFooterBtnItem() {
let { selectShowPopup, localSelectOption } = this.state
return (
<View style={list_common_item.sub_box}>
<View style={list_common_item.sub_two_btn}>
<TouchableOpacity
activeOpacity={.8}
style={[list_common_item.lef_btn, styles.fot_btn_lef]}
onPress={() => this.handleSubSelected(selectShowPopup)}
>
<Text style={list_common_item.lef_tip}>已选：{localSelectOption.length}</Text>
</TouchableOpacity>
<TouchableOpacity
activeOpacity={.8}
style={[list_common_item.rig_btn, styles.fot_btn_rig]}
onPress={() => this.handleSubmit(selectShowPopup)}
>
<Text style={list_common_item.rig_tip}>{'确定耗材'}</Text>
</TouchableOpacity>
</View>
<DetailsModel
show={ selectShowPopup }
closeModal={(show) => this.handleCloseSelectModal(show)}
closeSelected={(show) => this.handleSubSelected(show)}
closeSubmit={(show) => this.handleSubmit(show)}
subOption={ localSelectOption }
callback={(subOpt) => this.detailsCallbak(subOpt)}
/>
</View>
)
}
render() {
let {navigation} = this.props
let {title} = navigation.state.params
return (
<View style={styles.cu_dl_container}>
<StatusBarView
isReactStackNavigator={true}
backgroundColor={promary_color}
barStyle = 'light-content'
/>
<SafeAreaView style={safe_view}>
<HeadBackItem title={title} navigation={navigation} />
<View style={styles.cu_dl_main}>
{ this.renderSearchItem() }
{ this.renderContItem() }
</View>
{this.renderFooterBtnItem()}
</SafeAreaView>
</View>
);
}
}
const styles = StyleSheet.create({
cu_dl_container: {
flex: 1,
backgroundColor: home_background_color,
padding: 0,
margin: 0
},
cu_dl_main: {
flex: 1
},
list_cont: {
flex: 1
},
item_container: {
flex: 1
},
cons_cont_scroll: {},
cons_cont: {},
cons_sub_list: {
paddingHorizontal: 20,
paddingVertical: 12,
flexDirection: 'row',
alignItems: 'center'
},
sub_list_lef: {
paddingRight: 12
},
sub_icon_box: {
width: pxSize(20),
height: pxSize(20)
},
sub_list_rig: {},
rig_tit: {
fontSize: second_text_size,
color: promary_text_color,
fontFamily: font_family_regular
},
rig_ser: {
fontSize: 14,
color: '#ADADAD',
fontFamily: font_family_regular
},
fot_btn_lef: {
width: pxSize(220)
},
fot_btn_rig: {
width: pxSize(120)
// width: '38%'
}
})
export default ConsumDetailsPage;
app/containers/equipConsu/module/DetailsModel.js 0 → 100644
import React, { Component } from 'react';
import {
View,
Text,
StyleSheet,
SafeAreaView,
Modal,
ScrollView,
TouchableOpacity,
FlatList,
Image
} from 'react-native';
import {
pxHeight,
foundation_color,
promary_color,
second_text_color,
third_text_color,
first_text_color,
second_text_size,
Width,
pxSize,
dis_sub_color,
safe_view,
font_family_medium,
font_family_light,
list_common_item,
icon_style,
font_family_regular
} from '../../../base/BaseStyle';
class DetailsModel extends Component {
constructor(props) {
super(props);
this.state = {
isVisible: this.props.show,
topProcOptionList: [
{
title: '已选耗材'
},
// {
// title: '螺钉盒'
// },
// {
// title: '器械包'
// },
// {
// title: '工具'
// }
],
topActiveIndex: 0,
contOptionData: [ // 底部产品内容
{
"id": "0",
title: '人工髋关节假体-JS-HB ||| T',
tip1: '2001202001001774',
select: false
},
{
"id": "1",
title: '规格：JS-CGO PE 10 11',
tip1: '2001202001001774',
select: false
},
{
"id": "2",
title: '规格：JS-CGO PE 10 22',
tip1: '2001202001001774',
select: false
},
{
"id": "3",
title: '规格：JS-CGO PE 10 33',
tip1: '2001202001001774',
select: false
},
{
"id": "4",
title: '规格：JS-CGO PE 10 44',
tip1: '2001202001001774',
select: false
},
{
"id": "5",
title: '规格：JS-CGO PE 10 55',
tip1: '2001202001001774',
select: false
}
]
}
}
componentWillReceiveProps(nextProps) {
if (this.state.isVisible != nextProps.show) {
this.setState({ isVisible: nextProps.show });
}
if (nextProps.subOption) {
this.setState({ contOptionData: nextProps.subOption });
}
}
// 共计已选 点击
handleCloseSelected() {
console.warn('共计已选：666--model')
let {contOptionData} = this.state
this.props.callback(contOptionData)
this.closeModal()
// this.props.closeSelected(false)
}
// 确定耗材 点击
handleCloseSubmit() {
console.warn('确定耗材--model')
this.closeModal()
this.props.closeSubmit(false)
}
closeModal() {
this.setState({
isVisible: false
});
this.props.closeModal(false);
}
/**
* 删除当前耗材
* @param {object} item 当前小类数据
* @param {number} index 当前角标
*/
handleDelItemClick(item, index) {
console.log('-----删除-----', item, index)
let { contOptionData } = this.state
contOptionData.splice(index, 1)
this.setState({
contOptionData
})
}
// 点击顶部菜单
handleTopNav(item, index) {
this.setState({
topActiveIndex: index
})
}
// 返回顶部编辑选项
renderTopProItem() {
let { topProcOptionList, topActiveIndex, contOptionData } = this.state
return (
<View style={styles.top_box}>
<ScrollView
style={styles.top_scroll_cont}
horizontal={true}
showsHorizontalScrollIndicator={false}
>
{
topProcOptionList.map((item, index) =>
<TouchableOpacity
activeOpacity={1}
style={styles.top_touch_cont}
// onPress={() => this.handleTopNav(item, index)}
>
<View style={[
styles.top_inner,
// (index == 1 || index == 2) ? styles.se_thr_width : '',
// index == 3 ? styles.four_width : '',
index == topActiveIndex ? styles.top_inner_act : ''
]}>
<Text style={[styles.top_tit, index == topActiveIndex ? styles.top_tit_act : '']}>
{item.title}({contOptionData.length})
</Text>
</View>
</TouchableOpacity>
)
}
</ScrollView>
</View>
)
}
// 返回底部主要元素
renderContItem() {
return(
<View style={styles.edit_cont}>
<ScrollView
style={styles.edit_scroll_cont}
showsVerticalScrollIndicator={false}
>
<FlatList
style={styles.edit_list}
keyExtractor={item => item.id}
data={this.state.contOptionData}
extraData={this.state}
renderItem={ ({item, index}) => this.renderContColumnItem(item, index) }
/>
</ScrollView>
</View>
)
}
// 返回每一列元素
renderContColumnItem(item, index) {
return (
<TouchableOpacity
activeOpacity={1}
style={styles.column_container}>
<View style={styles.ri_inner}>
<View style={styles.ri_text_box}>
<Text style={styles.ri_te_tit}>
{ item.title }
</Text>
<Text style={[styles.ri_te_ot, styles.thr_ot]}>序列号：{item.tip1}</Text>
</View>
<View style={styles.ri_num_box}>
<TouchableOpacity
activeOpacity={.9}
style={styles.btn_inner}
onPress={() => this.handleDelItemClick(item, index)}
>
<View style={[styles.thr_num_btn, styles.thr_btn_left]}>
<Image source={require('../../../images/close_light_icon.png')} style={icon_style}></Image>
</View>
</TouchableOpacity>
</View>
</View>
</TouchableOpacity>
)
}
// 返回底部按钮
renderFooterBtnItem() {
let { contOptionData } = this.state
return (
<View style={list_common_item.sub_box}>
<View style={list_common_item.sub_two_btn}>
<TouchableOpacity
activeOpacity={.8}
style={list_common_item.lef_btn}
onPress={() => this.handleCloseSelected()}
>
<Text style={list_common_item.lef_tip}>共计已选：{contOptionData.length}</Text>
</TouchableOpacity>
<TouchableOpacity
activeOpacity={.8}
style={list_common_item.rig_btn}
onPress={() => this.handleCloseSubmit()}
>
<Text style={list_common_item.rig_tip}>{'确定耗材'}</Text>
</TouchableOpacity>
</View>
</View>
)
}
// 返回主要元素
renderDialog() {
return (
<View style={styles.opt_area}>
<View style={styles.modal_style}>
<View style={styles.scro_box}>
{this.renderTopProItem()}
{this.renderContItem()}
{/* {this.renderFooterBtnItem()} */}
</View>
{this.renderFooterBtnItem()}
</View>
</View>
)
}
render() {
return (
<View style={styles.dia_container}>
<Modal
transparent={true}
visible={this.state.isVisible}
animationType={'fade'}
onRequestClose={() => this.closeModal()}>
<SafeAreaView style={safe_view}>
<TouchableOpacity style={styles.container} activeOpacity={1}
// onPress={() => this.closeModal()}
>
{this.renderDialog()}
</TouchableOpacity>
</SafeAreaView>
</Modal>
</View>
);
}
}
const styles = StyleSheet.create({
dia_container: {
flex: 1,
},
container: {
flex: 1,
backgroundColor: 'rgba(0, 0, 0, 0.5)'
},
opt_area: {
flex: 1,
flexDirection: 'column',
justifyContent: 'center',
position: 'relative'
},
modal_style: {
position: "absolute",
left: 0,
bottom: 0,
width: Width(),
flex: 1,
flexDirection: "column",
backgroundColor: '#ffffff',
borderTopLeftRadius: 12,
borderTopRightRadius: 12,
height: pxHeight(580)
},
// item: {
// width: Width(),
// height: 40,
// paddingLeft: 20,
// paddingRight: 20,
// alignItems: 'center'
// },
// itemText: {
// fontSize: 16,
// color: third_text_color
// },
// curr_item: {
// color: first_text_color,
// fontWeight: 'bold'
// },
scro_box: {
flex: 1
},
top_box: {
width: Width(),
paddingHorizontal: 20
// backgroundColor: foundation_color,
},
top_scroll_cont: {
paddingBottom: 4,
borderBottomColor: '#DEDBDB',
borderBottomWidth: 1
},
top_touch_cont: {},
top_inner: {
justifyContent: 'center',
alignItems: 'center',
marginRight: 14,
borderBottomWidth: 2,
borderBottomColor: foundation_color,
minWidth: 50,
},
se_thr_width: {
minWidth: 42
},
four_width: {
minWidth: 28
},
top_inner_act: {
borderBottomWidth: 2,
borderBottomColor: promary_color
},
top_tit: {
paddingTop: 16,
paddingBottom: 12,
color: second_text_color,
// fontSize: third_text_size
fontSize: 14
},
top_tit_act: {
color: first_text_color,
fontWeight: 'bold'
},
edit_cont: {
// height: pxHeight(430)
flex: 1
},
edit_scroll_cont: {
height: '100%'
},
edit_list: {},
column_container: {
paddingHorizontal: 14
},
ri_inner: {
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
paddingHorizontal: 8,
backgroundColor: foundation_color,
},
ri_text_box: {
flex: 1,
borderBottomWidth: 1,
borderBottomColor: '#EAEAEA',
paddingVertical: 14,
},
ri_te_tit: {
fontSize: 14,
color: first_text_color,
fontFamily: font_family_regular
},
thr_ot: {},
ri_te_ot: {
fontSize: 14,
color: '#C5C6C5',
fontFamily: font_family_regular
},
ri_num_box: {
flexDirection: 'row',
alignItems: 'center'
},
thr_num_btn: {
width: pxSize(22),
height: pxSize(22)
},
thr_btn_left: {
marginRight: 4,
marginLeft: 14
},
btn_inner: {},
})
export default DetailsModel;
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment