joywok-material-components
Version:
<h1 align="center"> Joywok Material Components </h1>
966 lines (947 loc) • 36.8 kB
JavaScript
import React , {Component,Fragment} from 'react';
import {withStyles} from "@material-ui/core";
import {JwFullDialog,DialogFD,JwCustomDialog} from 'joywok-material-components';
import Button from '@material-ui/core/Button';
import Dialog from '@material-ui/core/Dialog';
import DialogActions from '@material-ui/core/DialogActions';
import DialogContent from '@material-ui/core/DialogContent';
import DialogContentText from '@material-ui/core/DialogContentText';
import DialogTitle from '@material-ui/core/DialogTitle';
import Slide from '@material-ui/core/Slide';
import Fade from '@material-ui/core/Fade';
import Loading from "../loading/index";
import Input from '../input/customInput';
import Checkbox from '../checkbox/normal';
import Radio from '../radio/custom';
import Textarea from '../input/textarea';
import request from '../utils/request';
import AloneTip from 'joywok-material-components/lib/tips/aloneTip';
require('./style/associatedObject.css');
const styles = theme => ({
root:{
overflowX:'hidden'
},
title:{
position:"absolute",
top:0,
left:0,
right:0,
height:theme.spacing.unit * 5+'px',
lineHeight:theme.spacing.unit * 5+'px',
padding:"0 "+theme.spacing.unit*2+'px 0 '+(theme.spacing.unit*2)+'px',
fontSize:'14px',
color:"#333",
borderBottom:'1px solid #e7e7e7',
},
content:{
position:"absolute",
top:50,
left:0,
right:0,
bottom:54
},
button:{
position:"absolute",
left:0,
right:0,
bottom:0,
boxShadow:'0 -1px 3px 0 rgba(0,0,0,0.04)',
padding:window.unit*(1.2)+'px '+(window.unit*2)+'px '+window.unit*(1.2)+'px ',
margin:0,
textAlign:'right'
},
buttonItem:{
minWidth:window.unit * 7.8,
height:window.unit * 3,
lineHeight:window.unit * 3+'px',
padding:0,
minHeight:0
},
agreeBtn:Underscore.extend({
minWidth:window.unit*(7.8)+'px ',
background:"#404A53",
color:'#fff',
"&:hover":{
background:"#404A53",
},
borderRadius:3,
marginRight:0,
marginLeft:window.unit*(1.2)+'px ',
}),
cancelBtn:{
minWidth:window.unit*(7.8)+'px ',
border:'1px solid #DDDDDD',
color:"#333333",
background:"#fff",
marginRight:'0px ',
borderRadius:3
},
buttons: theme.button,
moreBtn:{
}
})
class AssociatedObject extends React.Component {
constructor(props) {
super(props);
this.keyValue = {
link:i18n("external.link"),
file:i18n("file"),
intent:i18n("intent"),
phonecall:i18n("makecall"),
email:i18n("sendemail")
}
this.searchTime = null;
this.state = {
open: true,
sidbardata:props.sidbardata || ['link','file','intent','phonecall','email'],
sidbarType:props.type || props.sidbardata[0],
type:props.type || props.sidbardata[0],
linkValue:(props.type == 'link'?props.value:""),
fileValue:(props.type == 'file'?props.value:{}),
intentValue:(props.type == 'intent'?props.value:{}),
callValue:(props.type == 'phonecall'?props.value:""),
emailValue:(props.type == 'email'?props.value:{}),
buttonValue:(props.type == 'button'?props.value:{}),
list:[],
pagoallNum:0,
pageno:0,
pagesize:20,
search_key:'',
file_category:props.file_category || "",
folder_id:"",
loading:{
fix:true,
load:false
},
moreLoading:false
}
this.state.nav = [{type:'root',id:this.state.sidbarType,value:this.keyValue[this.state.sidbarType]}]
// this.state.type = this.state.sidbardata[0];
}
removeCustomDialog(){
let self = this;
setTimeout(function(){
$('#root-'+self.props.containerId).remove();
$('body').removeClass('overflowhidden')
},350)
}
handleClose(e){
this.setState({ open: false });
this.props.onClose && this.props.onClose();
if(typeof(this.props.dialogType)!='undefined'){
this.props.events.emit('close',this);
}
this.removeCustomDialog()
}
handleDialogClose(){
this.setState({ open: false });
this.removeCustomDialog()
}
cancelClick(e){
this.setState({ open: false });
this.removeCustomDialog()
this.props.onCancel && this.props.onCancel();
if(typeof(this.props.dialogType)!='undefined'){
this.props.events.emit('cancel',this);
}
}
agreeClick(e){
let type = this.state.type
let data = {
type:type
}
if(type == 'link'||this.state.sidbarType=='link'){
data['value'] = this.state.linkValue;
let reg = /(?:(https?|ftp|file):)?\/\/[-A-Za-z0-9+&@#/%?=~_|!:,.;]+[-A-Za-z0-9+&@#/%=~_|]/;
if(!reg.test(data['value'])){
AloneTip({type:'error',duration:2000,hasclose:false,autoHideDuration:2000,message:i18n("url.error")})
return
}
}
if(type == 'file'){
data['value'] = this.state.fileValue
}
if(type == 'intent'){
data['value'] = this.state.intentValue
if(typeof(data['value']['parameters']) && data['value']['parameters'].length!=0){
data['value'].parameters = this.state.intent_info && this.state.intent_info.data?this.state.intent_info.data:{}
}
}
if(type == 'phonecall'){
data['value'] = this.state.callValue
let reg = /^1[3456789]\d{9}$/;
if(isNaN(data['value'])){
AloneTip({type:'error',duration:2000,hasclose:false,autoHideDuration:2000,message:i18n("phone.error")})
return
}
}
if(type == 'email'){
data['value'] = this.state.emailValue
let reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
if(!reg.test(data["value"]['email'])){
AloneTip({type:'error',duration:2000,hasclose:false,autoHideDuration:2000,message:i18n("email.error")})
return
}
}
if(type == 'button'){
data['value'] = this.state.buttonValue
}
this.setState({ open: false });
this.removeCustomDialog()
this.props.onSave && this.props.onSave(data);
if(typeof(this.props.dialogType)!='undefined'){
this.props.events.emit('save',this,data);
}
}
changeLink(data){
let self = this;
this.setState({
linkValue:data.currentTarget.value
})
}
changeCheck(data){
this.setState({
type:data
})
}
showFolderFile(data){
//获取详情
let self = this;
let nav = JSON.parse(JSON.stringify(this.state.nav));
nav.push({type:'sep'})
nav.push({type:'custom',id:data.id,value:data.name});
this.setState({
nav:nav,
folder_id:data.id,
list:[],
pageno:0,
loading:{
fix:true,
load:true
}
})
setTimeout(function(){
self.requestFile({});
})
}
choseFile(data){
// console.log(data,'这个数据是什么啊')
this.setState({
type:'file',
fileValue:data
})
}
choseButton(data){
// console.log(data,'这个数据是什么啊')
this.setState({
type:'button',
buttonValue:data
})
}
choseIntentItme(data){
// console.log(data,'aaaaa');
let self = this;
this.setState({
type:"intent",
intentValue:data
})
}
changeIntentInfo(e,data,targetIndex){
let value = e.target.value;
let intentValue = this.state.intentValue;
let intent_info = this.state.intent_info;
let list = intent_info.data;
_.each(list,function(i,target){
if(target == targetIndex){
i['default'] = value
}
})
this.setState({
intent_info:Object.assign({},intent_info,{
data:list
}),
})
// console.log(intentValue,intent_info,data);
}
showIntentInfo(data){
let self = this;
if(typeof(data.parameters) && data.parameters.length!=0){
let nav = JSON.parse(JSON.stringify(this.state.nav));
nav.push({type:'sep'})
nav.push({type:'custom',id:data.uuid,value:data.name});
let intent_info = self.state.intent_info;
let datas = data.parameters;
if(typeof(intent_info)!='undefined' && typeof(intent_info['id'])!='undefined' && intent_info['id'] == data.uuid){
datas = intent_info.data;
}
this.setState({
sidbarType:"intent_info",
intent_info:{
id:data.uuid,
data:datas
},
nav:nav
})
}
}
changeCallValue(e){
let value = e.target.value;
this.setState({
callValue:value
})
}
changeEmailValue(e,key){
let value = e.target.value;
let data = {};
data[key] = value;
this.setState({
emailValue:Object.assign({},this.state.emailValue,data)
})
}
searchChange(e){
let self = this;
let value = e.target.value;
self.setState({
search_key:value,
pageno:0
});
clearTimeout(this.searchTime);
this.searchTime = setTimeout(function(){
if(self.state.sidbarType == 'file'){
setTimeout(function(){self.requestFile({})},0)
}else{
setTimeout(function(){self.requestIntent({})},0)
}
},400)
}
addMoreFile(e){
let self = this;
this.setState({
moreLoading:true,
pageno:this.state.pageno+1
})
clearTimeout(this.searchTime);
this.searchTime = setTimeout(function(){
if(self.state.sidbarType == 'file'){
setTimeout(function(){self.requestFile({})},0)
}else{
setTimeout(function(){self.requestIntent({})},0)
}
},400)
}
initList(){
let self = this;
let data = this.props;
let type = this.state.sidbarType;
if(type == 'link'){
return <div className="associated-object-list">
<div className="associated-object-check">
<Radio value={this.state.type} options={[{key:"link"}]} onChange={(e)=>this.changeCheck('link')}></Radio>
</div>
<div className="associated-object-linkc">
<div className="associated-object-link-title">{i18n("networkurl")}</div>
<div className="associated-object-link-val">
<Input className=" " placeholder={i18n("placeholder")} value={this.state.linkValue} onChange={(e)=>this.changeLink(e)}></Input>
</div>
</div>
</div>
}
if(type == 'file'){
return <div className="">
<div className="associated-object-type-search">
<Input icon={<i className="icon-search-s"></i>} className="has-border" placeholder={i18n("placeholder")} value={this.state.search_key} onChange={(e)=>self.searchChange(e)}></Input>
</div>
<div className="associated-object-type-nav">
{
_.map(this.state.nav,function(i,index){
if(i['type'] == 'sep'){
return <span className="sep">></span>
}else{
if(self.state.nav.length>2 && index!=self.state.nav.length-1){
return <span className={"active"} onClick={(e)=>self.changeNav(index)}>{i['value']}</span>
}else{
return <span className={""}>{i['value']}</span>
}
}
})
}
</div>
<div className="associated-object-list">
{
this.state.list && this.state.list.length!=0?
<div className="">
{
_.map(this.state.list,function(i){
if(i['file_type'] == 'jw_n_folder'){
return <div className="associated-object-file-i associated-object-file-i-folder" onClick={(e)=>self.showFolderFile(i)}>
<div className="associated-object-file-opear icon-business-arrow"></div>
<div className="associated-object-file-icon icon-business-obj-folder"></div>
<div className="associated-object-file-val ellipsis">{i['name']}</div>
</div>
}else{
return <div className="associated-object-file-i">
<div className="associated-object-file-check">
<Radio value={(self.state.type == 'file' && self.state.fileValue && self.state.fileValue.id?self.state.fileValue.id:"")} options={[{key:i["id"]}]} onChange={(e)=>self.choseFile(i)}></Radio>
</div>
<div className="associated-object-file-icon">
<img src={(i['preview']?i['preview']['link']:i['icon'])}/>
</div>
<div className="associated-object-file-val ellipsis">{i['name']}.{i['ext_name']}</div>
</div>
}
})
}
{
this.state.pagoallNum!=0?<div className="associated-object-file-i add-more">
<Button style={Object.assign({
background:"#00C78C",
"padding":"4px 12px",
"color":"#fff",
textTransform:"none",
"fontSize":"13px",
border:"1px solid #00C78C",
height:'30px',
lineHeight:1,
"minWidth":"85px"
})} className="add-more-btn" onClick={(e)=>self.addMoreFile(e)} disabled={self.state.moreLoading}>{self.state.moreLoading?i18n("loading.data"):i18n("more")}</Button>
</div> :""
}
</div>
:
<div className="associated-object-list-empty">
<i></i>
<span>{i18n('label.no-data')}</span>
</div>
}
{
this.state.loading.load?<div className={"associated-object-loading "+(this.state.loading.fix?'fix':'')}>
<Loading show={true}></Loading>
<div className="">{i18n("loading")}</div>
</div>:''
}
</div>
</div>
}
if(type == 'intent'){
// console.log(self.state,this.state.pageno,Math.ceil(self.state.pagoallNum/self.state.pagesize))
return <div className="">
<div className="associated-object-type-search">
<Input icon={<i className="icon-search-s"></i>} className="has-border" placeholder={i18n("placeholder")} value={this.state.search_key} onChange={(e)=>self.searchChange(e)}></Input>
</div>
<div className="associated-object-type-nav">
{
_.map(this.state.nav,function(i,index){
if(i['type'] == 'sep'){
return <span className="sep">></span>
}else{
if(self.state.nav.length>2 && index!=self.state.nav.length-1){
return <span className={"active"} onClick={(e)=>self.changeNav(index)}>{i['value']}</span>
}else{
return <span className={""}>{i['value']}</span>
}
}
})
}
</div>
<div className="associated-object-list">
{
this.state.loading.load?<div className={"associated-object-loading "+(this.state.loading.fix?'fix':'')}>
<Loading show={true}></Loading>
<div className="">{i18n("more")}</div>
</div>:
(
this.state.list.length!=0?
<div className="">
{
_.map(this.state.list,function(i){
return <div className={"associated-object-intent-i "+i['uuid']}>
{
typeof(i.parameters)&& i.parameters.length!=0?<div className="associated-object-intent-opear icon-business-arrow"></div>:''
}
<div className="associated-object-intent-check">
<Radio value={self.state.type == 'intent' && self.state.intentValue.uuid?self.state.intentValue.uuid:''} options={[{key:(i['uuid'])}]} onChange={(e)=>self.choseIntentItme(i)}></Radio>
</div>
<div className="associated-object-intentc" onClick={(e)=>self.showIntentInfo(i)}>
<div className="associated-object-intent-title">{i.name}</div>
<div className="associated-object-intent-val">{i.alias || "-"}</div>
</div>
</div>
})
}
{
this.state.pagoallNum!=0 && (this.state.pageno+1)<Math.ceil(self.state.pagoallNum/self.state.pagesize)?<div className="associated-object-intent-i add-more">
<Button style={Object.assign({
background:"#00C78C",
"padding":"4px 12px",
"color":"#fff",
textTransform:"none",
"fontSize":"13px",
border:"1px solid #00C78C",
height:'30px',
lineHeight:1,
"minWidth":"85px"
})} className="add-more-btn" onClick={(e)=>self.addMoreFile(e)} disabled={self.state.moreLoading}>{self.state.moreLoading?i18n("loading.data"):i18n("more")}</Button>
</div> :""
}
</div>
:
<div className="associated-object-list-empty">
<i></i>
<span>{i18n('label.no-data')}</span>
</div>
)
}
</div>
</div>
}
if(type == 'intent_info'){
// console.log(this.state.data,'asdasdas');
return <div className="">
<div className="associated-object-type-nav">
{
_.map(this.state.nav,function(i,index){
if(i['type'] == 'sep'){
return <span className="sep">></span>
}else{
if(self.state.nav.length>2 && index!=self.state.nav.length-1){
return <span className={"active"} onClick={(e)=>self.changeNav(index)}>{i['value']}</span>
}else{
return <span className={""}>{i['value']}</span>
}
}
})
}
</div>
<div className="associated-object-list">
<div className="associated-object-intentinfo-c">
{
_.map(self.state.intent_info.data,function(i,index){
return <div className="associated-object-intentinfo-i">
<div className="associated-object-intentinfo-title">{i.name}</div>
<div className="associated-object-intentinfo-val">
<Input className=" " placeholder={i18n("placeholder")} value={i['default']} onChange={(e)=>self.changeIntentInfo(e,i,index)}></Input>
</div>
</div>
})
}
</div>
</div>
</div>
}
if(type == 'phonecall'){
return <div className="associated-object-list">
<div className="associated-object-check">
<Radio value={this.state.type} options={[{key:"phonecall"}]} onChange={(e)=>this.changeCheck('phonecall')}></Radio>
</div>
<div className="associated-object-callc">
<div className="associated-object-call-title">{i18n("phonenumber")}</div>
<div className="associated-object-call-val">
<Input className=" " placeholder={i18n("placeholder")} value={this.state.callValue} onChange={(e)=>self.changeCallValue(e)}></Input>
</div>
</div>
</div>
}
if(type == 'email'){
return <div className="associated-object-list">
<div className="associated-object-check">
<Radio value={this.state.type} options={[{key:"email"}]} onChange={(e)=>this.changeCheck('email')}></Radio>
</div>
<div className="associated-object-emailc">
<div className="associated-object-email-title">{i18n("email")}</div>
<div className="associated-object-email-val">
<Input className=" " placeholder={i18n("placeholder")} value={this.state.emailValue.email || ''} onChange={(e)=>self.changeEmailValue(e,'email')}></Input>
</div>
<div className="associated-object-email-title">{i18n("title")}</div>
<div className="associated-object-email-val">
<Input className=" " placeholder={i18n("placeholder")} value={this.state.emailValue.title || ''} onChange={(e)=>self.changeEmailValue(e,'title')}></Input>
</div>
<div className="associated-object-email-title">{i18n("email.content")}</div>
<div className="associated-object-email-val">
<Textarea className=" " placeholder={i18n("placeholder")} value={this.state.emailValue.content || ''} onChange={(e)=>self.changeEmailValue(e,'content')}></Textarea>
</div>
</div>
</div>
}
if(type == 'button'){
if(this.props.buttons){
_.each(this.state.list,function(item){
_.each(self.props.buttons,function(btnItem){
if(btnItem.actions.length>0&&btnItem.actions[0].binding&&btnItem.actions[0].binding.obj&&btnItem.actions[0].binding.obj.id===item.id){
item.disabled=true
}
})
})
}
return <div className="">
<div className="associated-object-type-nav">
{
_.map(this.state.nav,function(i,index){
if(i['type'] == 'sep'){
return <span className="sep">></span>
}else{
if(self.state.nav.length>2 && index!=self.state.nav.length-1){
return <span className={"active"} onClick={(e)=>self.changeNav(index)}>{i['value']}</span>
}else{
return <span className={""}>{i['value']}</span>
}
}
})
}
</div>
<div className="associated-object-list">
{
this.state.list && this.state.list.length!=0?
<div className="">
{
_.map(this.state.list,function(i){
return <div className="associated-object-file-i">
<div className="associated-object-file-check">
<Radio value={(self.state.type == 'button' && self.state.buttonValue && self.state.buttonValue.id?self.state.buttonValue.id:"")} options={[{key:i["id"]}]} onChange={(e)=>self.choseButton(i)}
disabled={i.disabled||false}
></Radio>
</div>
<div className="associated-object-file-val ellipsis">{i['name']}</div>
</div>
})
}
</div>
:
<div className="associated-object-list-empty">
<i></i>
<span>{i18n('label.no-data')}</span>
</div>
}
</div>
</div>
}
}
initType(item){
if(item == 'link'){
return <div className={"associated-object-type-i "+(this.state.sidbarType == item?'active':'')} onClick={(e)=>this.changeType(item)}>
<i className="associated-object-type-i-opear icon-business-arrow"></i>
<div className="associated-object-type-i-icon icon-business-obj-link"></div>
<div className="associated-object-type-i-name ellipsis">{i18n("external.link")}</div>
</div>
}
if(item == 'file'){
return <div className={"associated-object-type-i "+(this.state.sidbarType == item?'active':'')} onClick={(e)=>this.changeType(item)}>
<i className="associated-object-type-i-opear icon-business-arrow"></i>
<div className="associated-object-type-i-icon icon-business-obj-file"></div>
<div className="associated-object-type-i-name ellipsis">{i18n("file")}</div>
</div>
}
if(item == 'intent' || item == 'intent_info'){
return <div className={"associated-object-type-i "+(this.state.sidbarType == item?'active':'')} onClick={(e)=>this.changeType(item)}>
<i className="associated-object-type-i-opear icon-business-arrow"></i>
<div className="associated-object-type-i-icon icon-business-obj-intent"></div>
<div className="associated-object-type-i-name ellipsis">{i18n("intent")}</div>
</div>
}
if(item == 'phonecall'){
return <div className={"associated-object-type-i "+(this.state.sidbarType == item?'active':'')} onClick={(e)=>this.changeType(item)}>
<i className="associated-object-type-i-opear icon-business-arrow"></i>
<div className="associated-object-type-i-icon icon-business-obj-call"></div>
<div className="associated-object-type-i-name ellipsis">{i18n("makecall")}</div>
</div>
}
if(item == 'email'){
return <div className={"associated-object-type-i "+(this.state.sidbarType == item?'active':'')} onClick={(e)=>this.changeType(item)}>
<i className="associated-object-type-i-opear icon-business-arrow"></i>
<div className="associated-object-type-i-icon icon-business-obj-email"></div>
<div className="associated-object-type-i-name ellipsis">{i18n("sendemail")}</div>
</div>
}
if(item == 'button'){
return <div className={"associated-object-type-i "+(this.state.sidbarType == item?'active':'')} onClick={(e)=>this.changeType(item)}>
<i className="associated-object-type-i-opear icon-business-arrow"></i>
<div className="associated-object-type-i-icon icon-business-obj-button"></div>
<div className="associated-object-type-i-name ellipsis">{i18n('button.system')}</div>
</div>
}
}
changeType(data){
if(this.state.sidbarType != data){
let datas = {
sidbarType:data,
pageno:0
}
if(data == 'link'){
datas.nav = [{type:'root',value:i18n("external.link")}];
this.setState(datas)
}
if(data == 'file'){
datas.nav = [{type:'root',value:i18n("file")}];
datas.loading = {
fix:true,
load:true
}
this.setState(datas)
this.requestFile({})
}
if(data == 'intent'){
datas.nav = [{type:'root',value:i18n("intent")}];
datas.loading = {
fix:true,
load:true
}
this.setState(datas)
this.requestIntent({})
}
if(data == 'phonecall'){
datas.nav = [{type:'root',value:i18n("makecall")}];
this.setState(datas)
}
if(data == 'email'){
datas.nav = [{type:'root',value:i18n("sendemail")}];
this.setState(datas)
}
if(data == 'button'){
datas.nav = [{type:'button',value:i18n('button.system')}];
datas.loading = {
fix:true,
load:true
}
this.setState(datas)
this.requestButton({})
}
}
}
requestFile(data){
let self = this;
let fetchData = Object.assign({},{
pageno:this.state.pageno,
pagesize:this.state.pagesize,
search_key:this.state.search_key,
folder_id:this.state.folder_id,
access_token:window.jw_sid
},data)
if(this.state.file_category.length!=0){
fetchData['file_category'] = this.state.file_category
}
let url = '/api/gauss/files';
if(typeof(this.props.fileUrl)!='undefined'){
url = this.props.fileUrl
}
request(url, {
method: 'GET',
body:fetchData
}).then(function(resp){
let datas = {
loading:{fix:data.pageno!=0?false:true,load:false},
pagoallNum:resp.data.JMStatus.num,
moreLoading:false
}
// list =
if(fetchData.pageno!=0){
datas['list'] = this.state.list.concat(resp.data.JMAttachments)
}else{
datas['list'] = resp.data.JMAttachments
}
// console.log(datas,'asdasdasdasdasdas');
// $('.associated-object-list').stop().animate({scrollTop:0});
self.setState(datas)
// $('.associated-object-list').off('scroll').on('scroll', function(e) {
// // console.log(e,'局部滚动');
// let clientHeight = $('.associated-object-list').height();
// let scrollTop = $('.associated-object-list').scrollTop();
// })
})
}
requestIntent(data){
let self = this;
request('/api/v1/intents', {
method: 'GET',
body:Object.assign({},{
page:this.state.pageno+1,
page_size:this.state.pagesize,
s:this.state.search_key,
parameters:1,
language:window.language
},data)
}).then(function(resp){
let list = [];
let move = false;
if(self.state.pageno!=0){
move = self.state.list[self.state.list.length-1]['uuid']
list = self.state.list.concat(resp.data.data)
}else{
list = resp.data.data
}
// console.log(move,self.state.pageno,list,'这个数据是什么啊');
self.setState({
loading:{fix:data.pageno!=0?false:true,load:false},
// list:resp.data.data,,
moreLoading:false,
list:list,
pagoallNum:resp.data.status.total_num
})
if(move){
setTimeout(function(){
let top = $('.'+move).offset().top+'px'
// $('.associated-object-list').stop().animate({scrollTop:top});
},100)
}
// $('.associated-object-list').off('scroll').on('scroll', function(e) {
// console.log(e,'局部滚动');
// })
})
}
requestIntentInfo(data){
// /api/v1/intents/{intent_uuid}
let self = this;
request('/api/v1/intents/'+data['uuid'], {
method: 'GET',
body:Object.assign({},{
intent_uuid:data.uuid,
language:window.language
})
}).then(function(resp){
// console.log(resp,'asdas');
if(typeof(resp['data']['data']['parameters'])!='undefined'){
let nav = JSON.parse(JSON.stringify(this.state.nav));
nav.push({type:'sep'})
nav.push({type:'custom',id:data.uuid,value:data.name});
self.setState({
loading:{
fix:true,
load:true
}
})
}else{
self.setState({
loading:{
fix:true,
load:true
}
})
setTimeout(function(){
self.requestIntent({});
})
}
})
}
requestButton(data){
let self = this;
let fetchData = Object.assign({},{
app_id:self.props.app_id,
trio_temp_id:self.props.trio_temp_id,
access_token:window.jw_sid
},data)
request('/api/trioconsole/buttons', {
method: 'GET',
body:fetchData
}).then(function(resp){
let datas = {
loading:{fix:false,load:false},
pagoallNum:0,
moreLoading:false
}
datas['list'] = resp.data.JMTrioButtons;
// console.log(datas,'asdasdasdasdasdas');
// $('.associated-object-list').stop().animate({scrollTop:0});
self.setState(datas)
// $('.associated-object-list').off('scroll').on('scroll', function(e) {
// // console.log(e,'局部滚动');
// let clientHeight = $('.associated-object-list').height();
// let scrollTop = $('.associated-object-list').scrollTop();
// })
})
}
changeNav(targetIndex){
let self = this;
let nav = JSON.parse(JSON.stringify(this.state.nav));
nav = nav.slice(0,targetIndex+1);
let data = {
nav:nav,
pageno:0
}
if(this.state.sidbarType == 'file'){
data.folder_id = "";
if(nav.length>1){
data.folder_id = nav[nav.length-1]['id']
}
data.list = [];
data.loading={
fix:true,
load:true
}
this.setState(data);
setTimeout(function(){
self.requestFile({});
})
}
if(this.state.sidbarType == 'intent_info'){
data.sidbarType = 'intent'
this.setState(data);
// setTimeout(function(){
// self.requestIntent({});
// })
}
}
render(){
const { classes } = this.props;
let data = this.props;
let self = this;
return (
<div ref="asdasdasd" className="zzzzzzzz">
<div className="associated-object">
<Fade in={this.state.open}>
<div className="associated-object-bg"></div>
</Fade>
<Slide direction="up" in={this.state.open}>
<div className="associated-object-w">
<div className="associated-object-c">
<div className={"associated-object-h "+classes.title +' ellipsis '+(this.props.titleClass || '')}>
{this.props.title}
</div>
<div className={'associated-object-content '+classes.content}>
<div className="associated-object-type">
{
_.map(this.state.sidbardata,function(i){
return self.initType(i)
})
}
</div>
<div className={"associated-object-main associated-object-"+this.state.sidbarType}>
{
this.initList()
}
</div>
</div>
<div className={'associated-object-footer '+classes.button+' '+(this.props.btnClass || '')}>
<Button onClick={(e)=>this.cancelClick(e)} className={classes.buttonItem +' '+classes.cancelBtn}>{i18n("btn.cancel")}</Button>
<Button onClick={(e)=>this.agreeClick(e)} className={classes.buttonItem+' '+classes.agreeBtn}>{i18n("btn.confirm")}</Button>
</div>
</div>
</div>
</Slide>
</div>
</div>
);
}
componentDidMount(){
let self = this;
$('body').addClass('overflowhidden');
let data = this.state;
// console.log(data,'asdasdasdasd');
if(data['type'] == 'file'){
self.setState({
loading:{
fix:true,
load:true
}
})
self.requestFile({})
}
if(data['type'] == 'intent'){
self.requestIntent({});
}
if(data['type'] == 'button'){
self.requestButton({})
}
}
componentDidUpdate(){
// console.log('123123123123');
}
}
export default withStyles(styles)(AssociatedObject);