yylib-quick-mobile
Version:
yylib-quick-mobile
402 lines (397 loc) • 15.6 kB
JavaScript
import React from 'react';
import { Radio, Checkbox, Modal, List, WhiteSpace, WingBlank, Toast, ActivityIndicator, NavBar, SearchBar, Icon, Accordion,Tabs,SwipeAction,Badge} from 'antd-mobile';
import './refer.less'
import DeleteTap from '../delete-tap/deleteTap'
import RestUrl from "../../common/RestUrl";
import {isFunction} from '../../utils/FunctionUtil';
let ListItem = List.Item;
let CheckboxItem = Checkbox.CheckboxItem;
let RadioItem = Radio.RadioItem;
let page;
let referUrl=[];
let treereferUrl=[];
let relyfield=[];
let referParams;
let data=[];
export default class YYReferTree extends React.Component {
constructor(props) {
super(props);
this.state = {
data:[], //分页初始数据
value:'', //选择的值
selectedId: null,
selectedNode: {},
selectedNodes: [],
animating: false,
pageCount:'',
searchText:'',
showList:false, //tree-list的modal
row:[], //选中的数组
};
}
componentWillReceiveProps(nextprops){
var {offline} = nextprops;
var ajax=window.YYUtils.Ajax;
let getJSON = offline?ajax.getJSONOffLine:ajax.getJSON;
if(nextprops.open!==this.props.open){
if(nextprops.open){
page = this;
let name = this.props.referName;
let open = this.props.open;
page.setState({
[name]:open,
row:[]
})
let referCode = page.props.referCode;
let referStyle = page.props.referStyle;
//根据参照编码获取参照信息
getJSON.call(ajax,RestUrl.REF_SERVER_URL + RestUrl.GET_REFINFO_BYCODE, {refCode: referCode}, function (result) {
if (result.success) {
if(result.data !== null){
referUrl[name] = result.data.dataurl;
treereferUrl[name] = result.data.treerelyurl;
relyfield[name] = result.data.relyfield;
referParams = {};
page.setState({
referName: result.data.refName,
referUrl: referUrl,
selectedNodes:[], //清空上次已选择
})
referParams.condition = page.props.condition;
page.getTreeData(referUrl[name], referParams,name);
} else {
Toast.info(result.msg,2)
}
} else {
Toast.info("请检查参照编码!", 3);
}
}, function (err) {
Toast.info("服务器通讯异常!", 3);
})
}
}
}
getTreeData (referUrl, referParams, contentname){
var {offline} = this.props;
var ajax=window.YYUtils.Ajax;
let getText = offline?ajax.getTextOffLine:ajax.getText;
if(referUrl&&referUrl!=""){
let _self = this;
_self.setState({
animating: true
})
getText.call(ajax,referUrl, referParams, function (result) {
if(result&&result!=""){
try{
result = JSON.parse(result);
}catch(e){
console.log("参照返回数据有异常!"+result)
_self.setState({
animating: false
})
return false;
}
data[contentname]=result;
data[contentname+'tree']=result;
}
_self.setState({animating: false })
}, function (err) {
_self.setState({
animating: false
})
Toast.info("服务器通讯异常!", 1);
})
}
}
onMultiChange = (e,selectedNode) => {
//多选模式
let selectedNodes = this.state.selectedNodes;
if (!selectedNodes.some((item) => {
return item.id === selectedNode.id
})) {
selectedNodes.push(selectedNode);
selectedNode.checked=true;
this.setState({
selectedNodes: selectedNodes,
row:selectedNodes
});
} else {
let newNodes = [];
selectedNodes.map((item) => {
if (item.id !== selectedNode.id) {
newNodes.push(item);
}
})
selectedNode.checked=false;
this.setState({
selectedNodes: newNodes,
row:newNodes
});
}
}
onSingleChange = (e,selectedNode) => {
//单选模式
if (selectedNode[this.props.id] === this.state.selectedId) {
this.setState({
selectedId: null,
selectedNode: {}
});
} else {
this.setState({
selectedId: selectedNode[this.props.id],
selectedNode: selectedNode
});
};
//选中后直接onOK
setTimeout(()=>{
this.setState({
pageNumber:1,
searchText:'',
showList:false,
})
let referParams = {};
referParams.condition = this.props.condition;
if (this.props.onOk && isFunction(this.props.onOk)) {
if (!this.props.multiMode) {
this.props.onOk(this.state.selectedNode,this.props.referName);
this.setState({
selectedId:null
})
} else {
this.props.onOk(this.state.selectedNodes,this.props.referName);
//清空上次选择
this.setState({
selectedNodes:[],
})
}
}
},0)
}
showModal = key => (e) => {
e.preventDefault(); // 修复 Android 上点击穿透
this.setState({
[key]: true,
});
}
onClose = key => (e) => {
//初始化列表数据后再关闭
let referParams = {};
referParams.condition = this.props.condition;
this.setState({
showList:false,
searchText:'',
})
this.props.onClose(key);
}
onOk = key =>(e)=> {
let _self = this;
this.setState({
pageNumber:1,
searchText:'',
showList:false,
})
let referParams = {};
referParams.condition = this.props.condition;
if (this.props.onOk &&isFunction(this.props.onOk)) {
if (!this.props.multiMode) {
this.props.onOk(this.state.selectedNode,key);
this.setState({
selectedId:null
})
} else {
this.props.onOk(this.state.selectedNodes,key);
//清空上次选择
this.setState({
selectedNodes:[],
})
}
}
}
onSearchSubmit = (value) => {
let totalData = data[this.props.referName];
let searchData = []; //储存搜索出来的结果
let searchKey = this.props.displayField; //需要搜索的key
if(value == ''){
data[this.props.referName+'tree'] = data[this.props.referName];
this.setState({
animating:false,
})
} else {
let search = (searchText,data)=>{
for(let i = 0 ; i < data.length; i++){
if(data[i][searchKey].includes(searchText)){
searchData.push(data[i])
}
if(data[i].children !== null){
search(searchText,data[i].children)
}
}
}
search(value,totalData);
data[this.props.referName+'tree']=searchData;
this.setState({
animating:false,
})
}
}
//点击右边进入下一级箭头
_clickItem = (item) => {
if(item.open == null){
item.open=true;
} else {
item.open =!item.open;
}
this.setState({animating:false})
}
treeContent = (treeData, selectedId,show) => {
if(!this.props.multiMode){
if(treeData){
return treeData.map((item,index) => {
let arrow = '';
if(!item.isLeaf&&!item.open&&item.children!==null){
arrow="right";
}
else if(!item.isLeaf&&item.open){
arrow="down";
}
if(show){
return <div style={{position:'relative',paddingLeft:'15px'}}>
<div className='refer-content' style={{borderBottom:'1px solid #CCCCCC'}}>
<RadioItem style={{width:'85vw'}} checked={false} onChange={(e) => this.onSingleChange(e,item)} key={index}>{this.getItemContent(item)}</RadioItem>
{arrow!==''&&<div className='yyrefer-tree-icon-openclose' onClick={()=>{this._clickItem(item)}}>
<Icon size="md" type={arrow} color="#C7C7CC" />
</div>}
</div>
<div style={{paddingLeft:'10px'}}>
{this.treeContent(item.children, selectedId,item.open)}
</div>
</div>
}
});
}
}else{
if(treeData){
return treeData.map((item,index) => {
let arrow = '';
if(!item.isLeaf&&!item.open&&item.children!==null){
arrow="right";
}
else if(!item.isLeaf&&item.open){
arrow="down";
}
if(show){
return <div style={{position:'relative',paddingLeft:'15px'}}>
<div className='refer-content' style={{borderBottom:'1px solid #CCCCCC'}}>
<CheckboxItem style={{width:'85vw'}} checked={item.checked} onChange={(e) => this.onMultiChange(e,item)} key={item.id}>{this.getItemContent(item)}</CheckboxItem>
{arrow!==''&&<div className='yyrefer-tree-icon-openclose'>
<Icon size="md" type={arrow} color="#C7C7CC" onClick={()=>{this._clickItem(item)}}/>
</div>}
</div>
<div style={{paddingLeft:'10px'}}>
{this.treeContent(item.children, selectedId,item.open)}
</div>
</div>
}
});
}
}
}
handleClick = (item)=>{
let fulldata = data[this.props.referName];
let selectdata = this.state.selectedNodes;
for(let i = 0;i < selectdata.length; i++){
if(item === selectdata[i]){
if(i==0){
selectdata.splice(0,1);
} else {
selectdata.splice(i,1);
}
this.setState({
selectNodes:selectdata,
row:selectdata
})
}
}
let checkedfalse = (data)=>{
for(let i = 0;i<data.length;i++){
if(item.id == data[i].id){
data[i].checked = false;
return;
} else {
if(data[i].children!==null){
checkedfalse(data[i].children)
}
}
}
}
checkedfalse(fulldata);
}
getItemContent(item){
let {displayField}=this.props;
if(this.props.renderRow){
let content=this.props.renderRow(item);
if(content){
return content;
}
}
return item[displayField];
}
render() {
const {value,selectedId,animating,pageNumber,showList} = this.state;
const {referlabel,referCode,multiMode,displayField,disabled,referStyle,referName,open,modalHeight,isSearch} = this.props;
return (
<WingBlank>
<WhiteSpace />
<Modal
popup
visible={disabled?'':open}
maskClosable={false}
animationType="slide-up">
<div style={modalHeight=='part'?{height:'93vh',width:'100vw'}:{height:'100vh',width:'100vw',display:'flex',flexDirection:'column'}}>
<div className='Nav'>
<NavBar leftContent="返回"
key="nav"
mode="light"
onLeftClick={this.onClose(referName)}
rightContent={[
<a key="nav" onClick={this.onOk(referName)}>确定</a>,
]}
>{referlabel}</NavBar>
</div>
<div>
<ActivityIndicator
toast
text="加载中..."
animating={animating}
/>
<List className="refer-tree-content">
{isSearch&&<SearchBar placeholder="搜索" className='yyrefer-tree-searchBar' onSubmit={this.onSearchSubmit}/>}
{this.treeContent(data[referName+'tree'], selectedId,true)}
</List>
</div>
{multiMode? <div className='yyrefer-tap'>
<div style={{width:'auto'}}>
<DeleteTap rows={this.state.row} displayField={displayField} handleClick={this.handleClick}/>
</div>
</div>:''}
</div>
</Modal>
</WingBlank>
);
}
}
YYReferTree.defaultProps = {
referlabel: '参照',
referCode: '00026',
modalHeight:'all',
displayField: 'name',
referParams: {},
multiMode: true,
disabled:false,
open:false,
onOk:{},
referName:'key',
referStyle:'list',
condition:{},
listCondition:{},
};