yylib-quick-mobile
Version:
yylib-quick-mobile
535 lines (512 loc) • 20.3 kB
JavaScript
import React from 'react';
import { Radio, Checkbox, Modal, List, WhiteSpace, WingBlank, Toast, ActivityIndicator, NavBar, SearchBar, Tabs,Badge, Accordion,Icon,SwipeAction} from 'antd-mobile';
import './refer.less'
import SwipeNavBar from '../swipeNavBar/SwipeNavBar'
import DeleteTap from '../delete-tap/deleteTap'
import RestUrl from "../../common/RestUrl";
import {isFunction} from '../../utils/FunctionUtil';
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
swiperow:[], //标题导航栏
changeOrNext:true, //点击选择或者onclick事件
row:[], //已选择列表
swiperNew:{}, //新增swiper
};
}
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
})
let referCode = page.props.referCode;
let referStyle = page.props.referStyle;
//储存选择列表有关的数据
data[page.props.referName+'fulldata']=[];
//根据参照编码获取参照信息
getJSON.call(ajax,RestUrl.REF_SERVER_URL + RestUrl.GET_REFINFO_BYCODE, {refCode: referCode}, function (result) {
if (result.success) {
// console.log(result.data);
if(result.data !== null){
referUrl[name] = result.data.dataurl;
treereferUrl[name] = result.data.treerelyurl;
relyfield[name] = result.data.relyfield;
referParams = {};
referParams.condition = page.props.condition;
referParams.pid = page.props.pid;
let rows = [{id:'001',name:'首页',url:referUrl[name],referParams:referParams}]
page.setState({
referName: result.data.refName,
referUrl: referUrl,
swiperow:rows,
row:[]
})
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;
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)
result=[];
}
//如果有数据则添加条目到导航栏
if(result.length!==0){
if(Object.keys(_self.state.swiperNew).length!==0){
_self.setState({
swiperow:[..._self.state.swiperow,_self.state.swiperNew],
swiperNew:{}
})
}
}
let fulldata = data[contentname+'fulldata'];
// console.log(fulldata)
for(let i = 0;i<fulldata.length;i++){
if(data[contentname+referParams.pid]==fulldata[i]){
data[contentname]=data[contentname+referParams.pid];
_self.setState({
animating: false
})
return;
}
}
data[contentname+referParams.pid]=result;
data[contentname]=data[contentname+referParams.pid];
data[contentname+'fulldata'].push( data[contentname+referParams.pid])
console.log(data[contentname+'fulldata']);
//首页和非首页的数据分别处理,如果存在点击过的情况就用缓存数据
}
_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
})) {
// console.log('onchange');
selectedNodes.push(selectedNode);
selectedNode.checked=true;
this.setState({
changeOrNext:false,
selectedNodes: selectedNodes,
row:selectedNodes
});
setTimeout(()=>{
this.setState({
changeOrNext:true,
})
},10)
} else {
let newNodes = [];
selectedNodes.map((item) => {
if (item.id !== selectedNode.id) {
newNodes.push(item);
}
})
selectedNode.checked=false;
this.setState({
changeOrNext:false,
selectedNodes: newNodes,
row:newNodes
});
setTimeout(()=>{
this.setState({
changeOrNext:true,
})
},10)
}
}
onSingleChange = (e,selectedNode) => {
//单选模式
if (selectedNode[this.props.id] === this.state.selectedId) {
this.setState({
selectedId: null,
selectedNode: {},
changeOrNext:false,
});
setTimeout(()=>{
this.setState({
changeOrNext:true,
})
},10)
} else {
this.setState({
selectedId: selectedNode[this.props.id],
selectedNode: selectedNode,
changeOrNext:false
});
setTimeout(()=>{
this.setState({
changeOrNext:true,
})
},10)
};
//单选时直接onOk
setTimeout(()=>{
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,this.props.referName);
this.setState({
selectedId:null
})
} else {
this.props.onOk(this.state.selectedNodes,this.props.referName);
//清空上次选择
this.setState({
selectedNodes:[],
})
}
}
},0)
}
onClose = key => (e) => {
//初始化列表数据后再关闭
// let referUrl = this.state.referUrl;
let referParams = {};
referParams.condition = this.props.condition;
this.setState({
showList:false
})
this.setState({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) => {
if(value == ''){
if(referParams.pid){
this.getTreeData(referUrl[this.props.referName], {pid:referParams.pid},this.props.referName);
} else {
this.getTreeData(referUrl[this.props.referName],{},this.props.referName);
}
} else {
console.log(value);
let currentData = data[this.props.referName];
let searchData = []; //搜索结果显示
let searchKey = this.props.displayField; //需要搜索的key
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,currentData);
data[this.props.referName] = searchData;
this.setState({
animating:false,
})
}
}
//点击右边进入下一级箭头
_clickItem = (item) => {
var ajax=window.YYUtils.Ajax;
this.setState({
animating:true
})
let _self = this;
var {offline} = this.props;
let getText = offline?ajax.getTextOffLine:ajax.getText;
getText.call(ajax,referUrl[_self.props.referName], {referParams,pid:item.id}, function (result) {
try{
result = JSON.parse(result);
}catch(e){
console.log("参照返回数据有异常!"+result)
result=[];
}
item.children = result;
if(item.open == null){
item.open=true;
} else {
item.open =!item.open;
}
_self.setState({
animating: false,
})
}, function (err) {
_self.setState({
animating: false
})
Toast.info("服务器通讯异常!", 1);
})
}
getItemContent(item){
let {displayField}=this.props;
if(this.props.renderRow){
let content=this.props.renderRow(item);
if(content){
return content;
}
}
return item[displayField];
}
treeContent = (treeData, selectedId,show) => {
if(!this.props.multiMode){
if(treeData){
return treeData.map((item,index) => {
let arrow = '';
if(!item.isLeaf&&!item.open){
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:'80vw'}} 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){
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={index}>{this.getItemContent(item)}</CheckboxItem>
{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>
}
});
}
}
}
onChange = ()=>{
}
nextRefer = (value)=>{
setTimeout(()=>{
if(this.state.changeOrNext){
if(!value.isLeaf){
this.setState({
swiperNew:value,
})
this.getTreeData(referUrl[this.props.referName], {referParams,pid:value.id},this.props.referName);
}
}
},10)
}
handleClick = (value) =>{
//点击导航栏所做的处理
if(value.name == '首页'){
this.setState({
swiperow:[value]
})
this.getTreeData(value.url, value.referParams,this.props.referName);
} else {
this.state.swiperow.some((item,index)=>{
if(item.id == value.id){
let name = this.props.referName;
let oldRow = this.state.swiperow;
let newRow = [];
newRow = oldRow.splice(0,index+1);
this.setState({
swiperow:newRow
})
this.getTreeData(referUrl[name], {pid:value.id},this.props.referName);
}
})
}
}
tapHandleClick = (item)=>{
let fulldata = data[this.props.referName+'fulldata'];
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 = (fulldata)=>{
for(let j = 0;j<fulldata.length;j++){
if(item.id == fulldata[j].id){
fulldata[j].checked = false;
return;
} else {
if(Array.isArray(fulldata[j].children)){
checkedfalse(fulldata[j].children)
} else {
checkedfalse(fulldata[j])
}
}
}
}
checkedfalse(fulldata);
}
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}
/>
<div className="refer-lazytree-content">
{isSearch&&<SearchBar placeholder="搜索" onSubmit={this.onSearchSubmit}/>}
<List>
{this.treeContent(data[referName], selectedId,true)}
</List>
</div>
</div>
{multiMode? <div className='yyrefer-tap'>
<div style={{width:'auto'}}>
<DeleteTap rows={this.state.row} displayField={displayField} handleClick={this.tapHandleClick}/>
</div>
</div>:''}
</div>
</Modal>
</WingBlank>
);
}
}
YYReferTree.defaultProps = {
referlabel: '参照',
referCode: '',
modalHeight:'all',
displayField: 'name',
referParams: {},
multiMode: true,
disabled:false,
open:false,
onOk:{},
referName:'key',
referStyle:'lazy-tree',
condition:{},
pid:{},
listCondition:{},
};