yylib-quick-mobile
Version:
yylib-quick-mobile
685 lines (656 loc) • 27.9 kB
JavaScript
import React from 'react';
import { Radio, Checkbox, Modal, List, WhiteSpace, WingBlank, Toast, ActivityIndicator, NavBar, SearchBar, Pagination, Accordion,Icon,Tabs,Badge,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 referTreeListParams={};
let referParams;
let data=[];
let pageCount=[];
let NUM = 1; //切换页码时的最大页数
let ListNum = {};
let onsearch = false; //是否在搜索状态
let searchNUM = 1; //搜索状态最大页数
let PID = '';
export default class YYReferTreeList extends React.Component {
constructor(props) {
super(props);
this.state = {
data:[], //分页初始数据
value:'', //选择的值
selectedId: null,
selectedNode: {},
selectedNodes: [],
animating: false,
pageCount:'',
searchText:'',
showList:false, //tree-list的modal
changeOrNext:true,
row:[],
swiperow:[],
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;
//根据参照编码获取参照信息
getJSON.call(ajax,RestUrl.REF_SERVER_URL + RestUrl.GET_REFINFO_BYCODE, {refCode: referCode}, function (result) {
if (result.success) {
if(result.data !== null){
//初始化参数
data={};
data[page.props.referName + 'selectlist'] = [];
NUM = 1; //切换页码时的最大页数
onsearch = false; //是否在搜索状态
searchNUM = 1; //搜索状态最大页数
referUrl[name] = result.data.dataurl;
treereferUrl[name] = result.data.treerelyurl;
relyfield[name] = result.data.relyfield;
referParams = {};
let rows = [{id:'001',name:'首页',url:treereferUrl[name],referParams:referParams}]
page.setState({
referName: result.data.refName,
referUrl: referUrl,
swiperow:rows,
row:[],
selectedNodes:[], //清空上次已选择
})
referParams.condition = page.props.condition;
page.getTreeData(treereferUrl[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:{}
})
}
}
data[contentname]=result;
}
_self.setState({ animating: false})
}, function (err) {
_self.setState({
animating: false
})
Toast.info("服务器通讯异常!", 1);
})
}
getListData(referUrl, referParams, pageNumber,contentname) {
let self = this;
var {offline} = this.props;
var ajax=window.YYUtils.Ajax;
let getJSON = offline?ajax.getJSONOffLine:ajax.getJSON;
self.setState({
animating: true
})
getJSON.call(ajax,referUrl, Object.assign({}, referParams, {pageNumber: pageNumber}), function (result) {
if (result.code === 'success') {
if(result.data.content.length==0){
Toast.info('参照列表信息为空',2)
}
let pid = referParams.relyCondition.split('=')[1];
data[contentname + 'list'] = result.data.content;
if (onsearch) {
data[contentname + 'searchlist' + pageNumber] = result.data.content
} else {
ListNum[pid] = pageNumber; //当前id最大下一页的列表的页数
data[contentname + pid+ 'list' + pageNumber] = result.data.content;
data[contentname + 'selectlist'] = [...data[contentname + 'selectlist'], ...result.data.content]
pageCount[contentname + pid+'list'] = result.data.pageCount;
}
pageCount[contentname] = result.data.pageCount;
self.setState({
// [contentname+'name']: result.data.content,
pageNumber:pageNumber,
pageCount: result.data.pageCount,
animating: false,
showList:result.data.content.length
})
} else {
data[contentname + 'list'] = [];
Toast.info('获取物料信息失败', 2)
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.id === this.state.selectedId) {
this.setState({
selectedId: null,
selectedNode: {}
});
} else {
this.setState({
selectedId: selectedNode.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
})
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:[],
})
}
}
}
onTreeChange = (e, selectedNode) => {
e.stopPropagation();
e.preventDefault();
if (selectedNode.id === this.state.selectedTreeId) {
this.setState({
selectedTreeId: null,
changeOrNext:false,
});
setTimeout(()=>{
this.setState({
changeOrNext:true,
})
},10)
} else {
this.setState({
selectedTreeId: selectedNode.id,
changeOrNext:false,
});
setTimeout(()=>{
this.setState({
changeOrNext:true,
})
},10)
}
PID = selectedNode.id;
//如果请求过列表则不再请求,使用缓存数据
if(data[this.props.referName+selectedNode.id+'list1']){
console.log('xxxxx');
console.log(data[this.props.referName+selectedNode.id+'list1'])
data[this.props.referName + 'list']=data[this.props.referName+selectedNode.id+'list1'];
pageCount[this.props.referName] = pageCount[this.props.referName + selectedNode.id + 'list']
referTreeListParams.relyCondition = (relyfield[this.props.referName] + '=' + selectedNode.id);
referTreeListParams.condition = this.props.listCondition;
referTreeListParams.pageSize = 10;
this.setState({
pageNumber:1,
showList:true
})
} else {
referTreeListParams.relyCondition = (relyfield[this.props.referName] + '=' + selectedNode.id);
referTreeListParams.condition = this.props.listCondition;
referTreeListParams.pageSize = 10;
this.getListData(referUrl[this.props.referName], referTreeListParams, 1, this.props.referName);
}
}
onSearchSubmit = (value) => {
if (value == '') {
onsearch = false;
this.setState({
searchText: value,
})
referTreeListParams.searchText='';
data[this.props.referName + 'list'] = data[this.props.referName +PID+ 'list' + 1];
pageCount[this.props.referName] = pageCount[this.props.referName +PID+ 'list'];
this.setState({
pageNumber: 1,
animating: false,
})
} else {
onsearch = true;
this.setState({
searchText: value,
})
referTreeListParams.searchText = value;
this.getListData(referUrl[this.props.referName], referTreeListParams, 1, this.props.referName);
}
this.setState({
searchText:value,
})
}
onTreeSearchSubmit = (value) => {
if(value == ''){
console.log(referParams.pid);
if(referParams.pid){
this.getTreeData(treereferUrl[this.props.referName], {pid:referParams.pid},this.props.referName);
} else {
this.getTreeData(treereferUrl[this.props.referName],{},this.props.referName);
}
} else {
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) => {
let _self = this;
var ajax=window.YYUtils.Ajax;
var {offline} = this.props;
let getText = offline?ajax.getTextOffLine:ajax.getText;
getText.call(ajax,treereferUrl[_self.props.referName], {referParams,pid:item.id}, function (result) {
result = JSON.parse(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];
}
treeListContent = (treeData, selectedId,show) => {
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 className='refer-content' style={{position:'relative',paddingLeft:'15px'}}>
<div style={{borderBottom:'1px solid #CCCCCC'}}>
<RadioItem style={{width:'80vw'}} checked={false} onChange={(e) => this.onTreeChange(e,item)} key={index}>{this.getItemContent(item)}</RadioItem>
{arrow!==''&&<div className='yyrefer-tree-icon-openclose' onClick={()=>{this._clickItem(item)}}>
<div style={{position:'relative'}} ><Icon size="md" type={arrow} color="#C7C7CC" /></div>
</div>}
</div>
<div style={{paddingLeft:'10px'}}>
{this.treeListContent(item.children, selectedId,item.open)}
</div>
</div>
}
});
}
}
listContent = (data,selectedId)=>{
if(this.props.multiMode){
if(data){
return data.map(item => (
<CheckboxItem key={item.id} checked={item.checked} onChange={(e) => this.onMultiChange(e,item)}>
{this.getItemContent(item)}
</CheckboxItem>
))
}
} else {
if(data){
return data.map(item => (
<RadioItem key={item.id} checked={selectedId === item.id}
onChange={(e) => this.onSingleChange(e,item)}>
{this.getItemContent(item)}
</RadioItem>
))
}
}
}
nextRefer = (value)=>{
setTimeout(()=>{
if(this.state.changeOrNext){
referParams.pid = value.id;
if(!value.isLeaf){
this.setState({
swiperNew:value,
})
this.getTreeData(treereferUrl[this.props.referName], referParams,this.props.referName);
}
}
},10)
}
handleClick = (value) =>{
//点击导航栏所做的处理
if(value.name == '首页'){
this.setState({
swiperow:[value]
})
this.getTreeData(value.url, {},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;
referParams.pid=value.id;
let newRow = [];
newRow = oldRow.splice(0,index+1);
this.setState({
swiperow:newRow
})
this.getTreeData(treereferUrl[name], {pid:value.id},this.props.referName);
}
})
}
}
tapHandleClick = (item)=>{
let fulldata = data[this.props.referName + 'selectlist'];
// console.log(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({
selectedNodes: selectdata,
row: selectdata
})
}
}
for (let i = 0; i < fulldata.length; i++) {
if (item.id == fulldata[i].id) {
fulldata[i].checked = false;
}
}
}
onChangePageNumber = (value) => {
if (onsearch) {
if (value > searchNUM) {
searchNUM++;
this.setState({
pageNumber: value
})
let referParams = {};
referParams.condition = this.props.condition;
referParams.pageSize = 10;
if (this.state.searchText !== '') {
referParams.searchText = this.state.searchText;
referTreeListParams.searchText = this.state.searchText;
}
this.getListData(referUrl[this.props.referName], referTreeListParams, value, this.props.referName);
} else {
data[this.props.referName + 'list'] = data[this.props.referName + 'searchlist' + value];
this.setState({
pageNumber: value,
animating: false,
})
}
} else {
if (value > ListNum[PID]) {
ListNum[PID]++;
this.setState({
pageNumber: value
})
let referParams = {};
referParams.condition = this.props.condition;
referParams.pageSize = 10;
referTreeListParams.relyCondition = (relyfield[this.props.referName] + '=' + PID);
this.getListData(referUrl[this.props.referName], referTreeListParams, value, this.props.referName);
} else {
data[this.props.referName + 'list'] = data[this.props.referName + PID+'list' + value];
this.setState({
pageNumber: value,
animating: false,
})
}
}
}
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.onTreeSearchSubmit}/>}
<List>
{this.treeListContent(data[referName], selectedId,true)}
</List>
</div>
<Modal
popup
visible={showList}
maskClosable={false}
animationType="slide-up"
>
<div style={modalHeight=='part'?{height:'93vh',width:'100vw'}:{height:'100vh',width:'100vw',display:'flex',flexDirection:'column'}}>
<NavBar leftContent="返回"
key="nav"
mode="light"
onLeftClick={()=>{this.setState({selectedTreeId: null,showList:false});referTreeListParams = {};NUM=1;searchNUM=1;onsearch=false;}}
rightContent={[
<a key="nav" onClick={this.onOk(referName)}>确定</a>,
]}
>{referlabel}</NavBar>
<ActivityIndicator
toast
text="加载中..."
animating={animating}
/>
<div className='refer-tree-content'>
{isSearch&&<SearchBar placeholder="搜索" onSubmit={this.onSearchSubmit}/>}
<List className="list-content">
{this.listContent(data[referName+'list'],selectedId)}
</List>
<Pagination total={pageCount[referName]}
onChange={this.onChangePageNumber}
className="custom-pagination-with-icon"
current={pageCount[referName] > 0 ? pageNumber : 1}
locale={{
prevText: (<span className="arrow-align">上一页</span>),
nextText: (<span className="arrow-align">下一页</span>),
}}
/>
</div>
{multiMode? <div className='yyrefer-tap'>
<div style={{width:'auto'}}>
<DeleteTap rows={this.state.row} displayField={displayField} handleClick={this.tapHandleClick}/>
</div>
</div>:''}
</div>
</Modal>
</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>
);
}
}
YYReferTreeList.defaultProps = {
referlabel: '参照',
referCode: '',
modalHeight:'all',
displayField: 'name',
referParams: {},
multiMode: true,
disabled:false,
open:false,
onOk:{},
referName:'key',
referStyle:'lazy-tree-list',
condition:{},
listCondition:{},
};