@beisen/auto-tree-cmp
v0.4.12
Published
AutoTree
Downloads
14
Readme
AutoTree
项目运行
cnpm install 或 npm install cnpm使用教程
npm install -g json-server 安装json-server 用于模拟获取数据
json-server -- watch tree.json 运行json-server
npm run dev （开发环境打包 port:8080）
npm run test （测试用例）
npm run build （生产环境打包）
参数
props
const options = {
required: true, //必填
disabled: false,
sync: false, //异步请求
status: 'edit', //edit,search
showDropDown: false, //渲染footer，带有确定按钮以及下拉弹层
hiddenTip: false,
sideTip: false, //tips是否左右显示 可选参数 true ，false 默认为false 可不设置，一般情况下均为false`
single: true, //单选多选
isFetching: this.state.isFetching, //loading状态
isSearchAutoTreeEdit:true, //是否在高级筛选中的组件（beisencloud的参数）
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", //唯一标示(cmp_id)
errorStatus: false, //是否报错
errorMsg:"出错了~~~！", //报错信息
helpMsg:"dsadas", //帮助信息
labelText: '选择部门11', //左侧 label 文字
showText:'请输入正确信1息',
placeholder: '输入部门2名称1', // input placeholder
lablePos: true, //label位置，true时在左边，false在上边
lableTxt: false, //label中文字对齐方式，true左对齐，false右对齐
defaultStatus:false, //// 输入框样式控制，默认false
hidden:false, //不显示，默认false
defaultValue:false, //todo 用于控制state.hasClick
defaultValueObj:{
id:'',
name:'',
path:'',
level:'',
},
getAutoTreeDataAPI,
autoTreeSearchCallBack: (val) => console.log(val),
keyUpCallBack: (event, value) => console.log(event, value), // input keyup输入回调
itemCallBack: (data) => {
console.log(data)
// this.setState({_defaultValue:data[0].name})
}, // 点击回调
focusCallBack: (value) => {
let self = this;
console.log('2focusCallBack')
setTimeout(function() {
self.props.getAutoTreeData(self.props.getAutoTreeDataAPI,'','');
},500)
}, // input focusp输入回调
blurCallBack: (event) => console.log(event), // input失去焦点回调
changeCallBack: (event,value,inputValue) => {console.log(event, value,inputValue)}, // input keyup输入回调
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-dev2.引用组件
import auto-tree from "@beisen/auto-tree"3.传入参数
该参数为上述参数，传入方式使用: {...参数}
class Demo extends Component{
constructor(props){
super(props);
this.state = {
// hidden:false,
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.props.getAutoTreeData(self.props.getAutoTreeDataAPI,'','');
self.setState({isFetching:false})
},500)
}
clearAutoTreeData() {
this.props.clearAutoTreeData();
}
render () {
let self = this;
const options = {
required: true,
disabled: false,
sync: false, //true：同步，false：异步
status: 'search', //edit,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:"出错了~~~！", //报错信息
// showText:'请输入正确信息',
labelText: '选择部门', //左侧 label 文字
// placeholder: '', // input placeholder
lablePos: true, //label位置，true时在左边，false在上边
lableTxt: false, //label中文字对齐方式，true左对齐，false右对齐
autoTreeSearchCallBack: (val,filters) => {this.setState({defaultDropValue:filters})},
keyUpCallBack: (event, value) => {}, // input keyup输入回调
itemCallBack: (data) => {
}, // 点击回调
focusCallBack: (value) => {
// setTimeout(function() {
// self.setState({isFetching:false})
// },5500)
console.log('点击了')
let self = this;
setTimeout(function() {
// self.props.getAutoTreeData(self.props.getAutoTreeDataAPI,'','');
},500)
}, // input keyup输入回调
blurCallBack: (event) => {}, // 点击回调
changeCallBack: (event,value,inputValue) => {}, // input keyup输入回调
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, //1异步 0同步
id:1, //异步请求的第一层数据pid,非必须
sidebarScene:false, // false或该字段没有，则为非sidebar交互方式
// scrollBar:true, //false则不使用
initGetData:true, //默认为tree,是否组件在首次渲染时请求数据,树组件默认会在DidMount时执行getTreeData方法去请求数据
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":"" //input框前的文字标识，可为空
,"placeholder":"搜索" /**没有值的时候显示的内容(string)**/
,"defaultValue": this.state.defaultDropValue //默认值
,"openListView":false // 是否打开下拉框
,"errorStatus":true // 错误状态
,"errorMsg":"出错了~~~！" //错误信息
,multiple: false //下拉菜单为单选或者多选，true为多选，false为单选,默认为false
,"children":[
{
"value":0
,"text":"本级别及所有下级"
,"isActive":false //点击效果，默认为false
,"isChecked":false //是否被选中，默认为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
}
] /** MenuItem **/
,"hidden":false //是否显示\
,"disabled":false //是否禁用
,"required":false //是否显示必选星号
,"iconName":"pc-sys-arrowdown-nomal-svg" //右侧下拉按钮的样式
,"onClick":function(event, target, val){} /**点击后事件回调；event：事件，target: 事件对象，val：抛出的值**/
,"onBlur":function(event, val){} /**失去焦点后事件回调event：val：input抛出的值**/ /**change后事件回调event：事件，target: 事件对象，val：input中值改变的值**/
,"onFocus":function(event, val){} /**获取焦点后事件回调event：事件，val：抛出的input中的值**/
}
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')
);