SelectItemView.js
5.44 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
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
import React, {Component} from 'react';
import {Image, Text, TouchableOpacity, View,} from "react-native";
import {isJSONString} from "../utils/utils";
// 默认高度
const defaultHeight = (70);
// 默认标题高度
const titleViewHeight = (24);
// 默认垂直内边距
const VPading = (6);
/*
选择组件
该组件可匹配以下几种数据格式
经营单元选择（type:'OPERATING_UNIT'）
岗位选择（type:'POSITION'）
部门选择（type:'ORGANIZATION'）
*/
export default class SelectItemView extends Component {
// 构造方法
constructor(props) {
super(props);
this.state = {
// 选中内容的文字
selectText: ''
}
// 传入参数
this.attrData = this.props.attrData;
// json解析后的传入参数
this.extendData = (this.attrData.data && this.attrData.data.length > 0) ? JSON.parse(this.attrData.data) : {};
// 传入的导航(用于页面跳转)
this.navigation = this.props.navigation;
// 用于带出选择内容的callback回调
this.callback = this.props.callback;
}
// 生命周期-组件将要展示
componentWillMount() {
// 设置默认值
if (this.attrData.value && this.attrData.value.length > 0) {
if (isJSONString(this.attrData.value)) {
let data = JSON.parse(this.attrData.value);
let selectValue = '';
if (this.attrData.type === "OPERATING_UNIT" || this.attrData.type === "ORGANIZATION") {
selectValue = data.name;
} else if (this.attrData.type === "POSITION") {
// 岗位是拼接的
selectValue = data.organizationName + "-" + data.jobName + "-" + data.employeeName;
}
this.setState({
selectText: selectValue
})
}
}
}
// 绘制UI
render() {
/*
name:标题
code:代码编号
type:控件类型(LONG_TEXT)
description:描述
isRequired:是否必须
isPreview:是否预览
*/
let {name, code, type, description, isRequired, isPreview} = this.attrData;
// 提示文字
let {placeholder} = this.extendData;
return (
// 最外层样式区域
<View style={{
width: '100%',
minHeight: defaultHeight,
paddingTop: VPading,
paddingLeft: 10,
paddingRight: 15,
backgroundColor: '#fff'
}}>
{/*触发跳转到选择页面*/}
<TouchableOpacity
style={{flexDirection: 'row', width: '100%', backgroundColor: '#fff', alignItems: 'center'}}
activeOpacity={0.8}
onPress={() => {
this.navigation.navigate("SelectItemList", {
name: name, type: type, extentData: this.extendData,
callback: (selectValue, showContent) => {
this.setState({
selectText: showContent
});
this.attrData.value = selectValue;
if (!!this.callback) {
this.callback(selectValue)
}
}
})
}}
>
<View style={{flex: 1}}>
{/*标题显示区域*/}
<View style={{
flexDirection: 'row',
height: titleViewHeight,
justifyContent: 'flex-start',
alignItems: 'center',
backgroundColor: '#fff'
}}>
{/*是否必须UI设定*/}
{isRequired && <Text style={{color: "#FF3030"}}>* </Text>}
{!isRequired && <Text style={{color: "#fff"}}>* </Text>}
{/*标题设定*/}
<Text style={{fontSize: 16, color: 'rgba(0, 0, 0, 1)'}}>{name || ""}</Text>
</View>
<View style={{
width: "100%",
minHeight: 30,
marginLeft: 10,
marginTop: 4,
marginBottom: 4,
justifyContent: 'center',
backgroundColor: 'white'
}}>
{/*用于显示选择结果*/}
<Text
style={{
fontSize: 14,
color: (!!this.state.selectText && this.state.selectText.length > 0) ? 'black' : '#999',
textAlign: 'left',
}}>{this.state.selectText || placeholder || '请选择'}
</Text>
</View>
</View>
<Image style={{width: 16, height: 16}} source={require('../img/bread.png')} resizeMode={'contain'}/>
</TouchableOpacity>
</View>
);
}
}