AutoTree
项目运行
-
cnpm install 或 npm install cnpm使用教程
-
npm run serve:data //用于本地模拟数据服务
-
npm run dev (开发环境打包 port:8080)
-
npm run test (测试用例)
-
npm run build (生产环境打包)
参数
props
const options = {
required: true,
disabled: false,
sync: false,
status: 'edit',
showDropDown: false,
hiddenTip: false,
sideTip: false,
single: true,
isFetching: this.state.isFetching,
isSearchAutoTreeEdit:true,
autoTreeData: [{
id:'0',
name:'100990'
},
{
id:'1',
name:'asdfasdf'
}],
treeData:[{
"id": "32025",
"name": "技术体系阿斯顿发送到发送到发送到发送到发送到发送到发送到发送的方式打发当时发生的发生的",
"path": "32025.",
"pid": "0",
"level": "1",
"has_child":false,
"clickable":false
}],
componentId:"3",
errorStatus: false,
errorMsg:"出错了~~~!",
helpMsg:"dsadas",
labelText: '选择部门11',
showText:'请输入正确信1息',
placeholder: '输入部门2名称1',
lablePos: true,
lableTxt: false,
defaultStatus:false,
hidden:false,
defaultValue:false,
defaultValueObj:{
id:'',
name:'',
path:'',
level:'',
},
getAutoTreeDataAPI,
autoTreeSearchCallBack: (val) => console.log(val),
keyUpCallBack: (event, value) => console.log(event, value),
itemCallBack: (data) => {
console.log(data)
},
focusCallBack: (value) => {
let self = this;
console.log('2focusCallBack')
setTimeout(function() {
self.props.getAutoTreeData(self.props.getAutoTreeDataAPI,'','');
},500)
},
blurCallBack: (event) => console.log(event),
changeCallBack: (event,value,inputValue) => {console.log(event, value,inputValue)},
clearCallback: ()=>{console.log('clearCallback')},
searchSubmitCallBack: (value) =>{console.log(value)},
setSessionCallBack:() => {},
submitCallBack:(resultsData)=>{console.log(resultsData)},
getAutoTreeData:(getAutoTreeDataAPI,inputValue,filters)=>{},
findAllSearch:(value)=>{},
clearAutoTreeData:()=>{},
showPopCallback:()=>{},
removeComponent:()=>{},
unmountCallBack:()=>{},
onCloseCallback:(event)=>{},
itemCloseCallBack:(resultsData)=>{},
}
使用方法
1.安装npm组件包
npm install @beisen/auto-tree --save-dev
2.引用组件
import auto-tree from "@beisen/auto-tree"
3.传入参数
该参数为上述参数,传入方式使用: {...参数}
class Demo extends Component{
constructor(props){
super(props);
this.state = {
popShow:true,
target: "",
defaultDropValue: '',
defaultValue: '',
treeMaxheight: '',
isFetching: true
}
this.popClose = this.popClose.bind(this);
this.removeComponent = this.removeComponent.bind(this);
}
popClose() {
let self = this;
this.setState({
popShow: !this.state.popShow
})
}
removeComponent() {
this.setState({
popShow: false
})
}
componentDidMount() {
if(this.refs.dirButton!=undefined){
let target = this.refs.dirButton.getBoundingClientRect();
this.state.target = target;
this.setState(this.state);
}
let self = this;
setTimeout(function() {
self.setState({isFetching:false})
},500)
}
clearAutoTreeData() {
this.props.clearAutoTreeData();
}
render () {
let self = this;
const options = {
required: true,
disabled: false,
sync: false,
status: 'search',
single: true,
isFetching: this.state.isFetching,
isSearchAutoTreeEdit:true,
hiddenTip: false,
sideTip: false,
showDropDown: true,
totalCount: 100,
helpMsg: 'aaaaaa',
autoTreeData: [
{
id:'0',
name:'100990ajksdhfoiqhwieofhsdhfajshdfjahsdjkfhaksdhfajsdhfquwehfkjasdhfkajshdfjasbdvasnbkjsdfbksjhdf',
pname:'我是爸爸'
},{
id:'1',
name:'100990',
pname:'我是爸爸'
},{
id:'2',
name:'123123123123'
},{
id:'3',
name:'1qweqweqwe'
},{
id:'4',
name:'1asdfasdf'
},{
id:'5',
name:'23123123'
},{
id:'6',
name:'1asdadssdasdasd'
},{
id:'7',
name:'10dsfgergsdfgsdfg0'
},{
id:'8',
name:'1435467867543'
},{
id:'9',
name:'sdfgwer1fasdfasdf'
},{
id:'10',
name:'23434534534511435345'
},{
id:'11',
name:'sdfsdfgsdfgsdfg111'
},{
id:'12',
name:'sdvsdfgsfgweger11222'
},{
id:'13',
name:'dfgrgw2211'
}
],
defaultValue: '',
defaultStatus: false,
componentId:"1",
errorStatus: false,
errorMsg:"出错了~~~!",
labelText: '选择部门',
lablePos: true,
lableTxt: false,
autoTreeSearchCallBack: (val,filters) => {this.setState({defaultDropValue:filters})},
keyUpCallBack: (event, value) => {},
itemCallBack: (data) => {
},
focusCallBack: (value) => {
console.log('点击了')
let self = this;
setTimeout(function() {
},500)
},
blurCallBack: (event) => {},
changeCallBack: (event,value,inputValue) => {},
clearCallback: () => {},
showPopCallback: () =>{},
unmountCallBack: () => {},
searchSubmitCallBack: (value) =>{console.log(value)},
submitCallBack: (data) =>{console.log(data)},
onCloseCallback:(value)=>this.clearAutoTreeData(),
setSessionCallBack:() => {},
itemCloseCallBack: (data) => {console.log(data)}
}
const treeData = {
toggle: true,
treeData: this.props.treeData,
async: 1,
id:1,
sidebarScene:false,
initGetData:true,
postData:[],
methodType:'GET',
getTreeData:function(id,treeAsync,getUrl,postData,methodType) {
console.log(id,treeAsync,getUrl,postData,methodType)
self.props.getTreeData(getUrl,id);
},
getTreeDataAPI: '' || 'http://localhost:3001/getTreeData'
,style:{
"maxHeight":this.state.treeMaxheight
}
,clearTreeData:function() {console.log('clearTreeData')}
}
const DropDownData = {
"title":""
,"placeholder":"搜索"
,"defaultValue": this.state.defaultDropValue
,"openListView":false
,"errorStatus":true
,"errorMsg":"出错了~~~!"
,multiple: false
,"children":[
{
"value":0
,"text":"本级别及所有下级"
,"isActive":false
,"isChecked":false
}
,{
"value":1
,"text":"本级别"
,"isActive":false
,"isChecked":false
}
,{
"value":2
,"text":"本本级别及直接下级"
,"isActive":false
,"isChecked":false
}
,{
"value":3
,"text":"直接下级"
,"isActive":false
,"isChecked":false
}
,{
"value":4
,"text":"全部下级"
,"isActive":false
,"isChecked":false
}
]
,"hidden":false
,"disabled":false
,"required":false
,"iconName":"pc-sys-arrowdown-nomal-svg"
,"onClick":function(event, target, val){}
,"onBlur":function(event, val){}
,"onFocus":function(event, val){}
}
let popTree = this.state.popShow?<AutoTree {...options} {...this.props} {...this.state} popClose={this.popClose} DropDownData={DropDownData} treeData={treeData} removeComponent={this.removeComponent} />:"";
return (
<div style={{marginTop:'50px',height:"700px"}}>
<div>
{popTree}
</div>
</div>
)
}
}
render(
<Provider store={store}>
<Demo />
</Provider>,
document.getElementById('content')
);