MemberList.js
4.81 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
import React from 'react';
import { SwipeAction } from 'antd-mobile';
import $ from 'jquery';
import { sortArr } from '../../utils/dataFilter';
import Iscroll from "../../components/Iscroll";
import css from './css.less';
class MemberList extends React.Component{
constructor(props) {
super(props);
this.state = {
list: [],
searchVal:'',
isShowTips: true,
letters: ['A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z','#']
}
}
swipeBack(el, i) {
$(el).find('.am-swipe-cover, .am-swipe-content').css('left', 0);
}
//绑定子组件scroll得方法
maoPointRef = (ref) => {
this.child = ref;
}
render() {
const { dataList, pTitle, showActionSheet, chooseClient, handleAction, renderItem, renderType, filterData, handleEdit,isCheckClientStateForSwipe } = this.props;
const list = sortArr(dataList, renderType);
const isf = typeof handleAction === 'function';
return <div className={css.listWrap}>
<div className={css.splitline}></div>
<div className={css.search}>
<input
onChange={(e) => {
this.setState({ searchVal: e.target.value });
filterData(e.target.value.trim());
}}
value={this.state.searchVal}
placeholder={"请输入" + pTitle + "姓名"} />
</div>
<div className={css.subTip}>所有{pTitle}<i>（{dataList.length}人）</i></div>
<div className={css.scrollListWrap} style={{height:this.props.height ? this.props.height : '66vh'}} ref={el=>this.nameList=el}>
<Iscroll id={"memberList_"+this.props.id}
iscrollOptions={{
probeType:2
}}
onRef={this.maoPointRef}
>
<div className={css.list}>
{
list.length>0 && list.map((itm, index) => {
return <dl key={index} id={'list'+itm.letter} ref={el=>this['list'+itm.letter]=el} >
<dt>{itm.letter}</dt>
{
itm.list.map((item, i) => {
let disabled = false;
if (isCheckClientStateForSwipe) {
disabled = item.currentState && item.currentState !== '2';
}
return <dd key={index + '_' + i} onClick={() => {
if (chooseClient) {
chooseClient(item);
}
}}>
<SwipeAction
disabled={disabled||!isf}
right={[
{
text: '编辑',
onPress: () => {
this.swipeBack(this['list' + itm.letter]);
handleEdit(item);
},
style: { backgroundColor: '#ddd', color: 'white' },
},
{
text: '删除',
onPress: () => {
this.swipeBack(this['list' + itm.letter]);
this.setState({
isShowTips: true
})
isf && handleAction(item);
},
style: { backgroundColor: '#F4333C', color: 'white' },
},
]}
>
{
renderItem(item, index + '_' + i)
}
</SwipeAction>
</dd>
})
}
</dl>
})
}
</div>
</Iscroll>
</div>
{
// 是否有选择操作
showActionSheet && <div className={css.btnAdd} onClick={ showActionSheet }></div>
}
<ul className={css.indexList} style={{height:this.props.height ? this.props.height : '69vh'}}>
{
// 右侧字母索引
this.state.letters.map((item,i) => {
return <li key={i} onClick={() => {
for (let j = 0; j < list.length; j++){
if (list[j].letter === item) {
console.log('elementToTarget-->list',item)
this.child.elementToTarget('list' + item);
}
}
}}>{item}</li>
})
}
</ul>
</div>
}
}
export default MemberList;