TabDetailView.js
3.51 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
import React, {Component} from 'react';
import {
View,
Text,
TextInput,
Image,
ScrollView,
StyleSheet,
TouchableOpacity,
} from 'react-native';
import {Row, Rows, Table} from 'react-native-table-component';
import {xnBorderWidth} from "../utils/utils";
const HPading = (16);
const VPading = (6);
/**
* 表格/明细 组件
*/
export default class TabDetailView extends Component {
constructor(props) {
super(props);
this.state = {
tableHead: ['Head', 'Head2', 'Head3', 'Head4'],
tableData: [
['1', '2', '3', '4'],
['a', 'b', 'c', 'd'],
['1', '2', '3', '456\n789'],
['a', 'b', 'c', 'd']
],
dataList:[],// 列表数据
};
this.attrData = this.props.attrData;
this.extendData = JSON.parse(this.attrData.data);
this.tabType = this.attrData.data.type;// 固定：list=列表|table=表格
}
render() {
const options = this.state;
let {name, code, type, description, isRequired, isPreview} = this.attrData;
// 按钮文本 // // 显示合计
let {buttonText, showCount} = this.extendData;
return(
<View style={{width: '100%', backgroundColor: 'white', paddingHorizontal: 5, paddingVertical: 10}}>
<View style={{flexDirection: 'row',height:titleViewHeight,backgroundColor:'#fff'}}>
{isRequired&&<Text style={{ color: "#FF3030" }}>* {" "}</Text>}
{!isRequired&&<Text style={{ color: "#fff" }}>* {" "}</Text>}
<Text style={{fontSize: 16, color: 'rgba(0, 0, 0, 1)', marginBottom: 5}}>{name||''}</Text>
</View>
{this.tabType === 'list' && this.renderListItem()}
{this.tabType === 'table' && this.renderTableItem()}
{/** TODO 显示合计 */}
{showCount && <View style={{width: '100%', height: 44, alignItems: 'center', borderBottomWidth: xnBorderWidth(),
borderBottomColor: '#ddd', flexDirection: 'row'}}
>
<Text style={{marginLeft: 10, fontSize: 16, color: 'black'}}>合计</Text>
</View>}
<TouchableOpacity
style={{width: '100%', height: 44, alignItems: 'center', justifyContent: 'center'}}
activeOpacity={0.8}
onPress={()=>{
let itemData = {};
let tempList = this.state.dataList||[];
tempList.push(itemData);
this.setState({
dataList: tempList
})
}}
>
<Text style={{fontSize: 16, color: global.homeColor}}>{'+' + buttonText}</Text>
</TouchableOpacity>
</View>
);
}
/**
* 列表
*/
renderListItem() {
}
/**
* 表格
*/
renderTableItem() {
return (
<View style={{width: '100%', backgroundColor: 'white'}}>
<Table borderStyle={{borderWidth: 1, borderColor: '#f0f'}}>
<Row data={options.tableHead} style={styles.head} textStyle={styles.text}/>
<Rows data={options.tableData} textStyle={styles.text}/>
</Table>
</View>
);
}
}
const styles = StyleSheet.create({
head: { height: 40, backgroundColor: '#f1f8ff' },
text: { margin: 6 }
})