/**
* Created by Admin on 2016/9/19.
* 批量导入
*/
import React, {Component, PropTypes} from "react";
import {Link} from "react-router";
import {Upload, Icon, Select, Row, Col, Button, notification, Card, Cascader} from "antd";
import CustomBreadcrumb from "../CustomBreadcrumb";
import Utils from "../../common/Utils";
import moment from "moment"; export default class ExportData extends Component { state = {
inputValue: '',
// templateUrl: '/assets/templatefile/行政处罚模板.xlsx',
options: [{
value: 'TI_B_XZXK_REPORTING',
label: '行政许可',
isLeaf: false,
}, {
value: 'TI_B_XZCF_REPORTING',
label: '行政处罚',
isLeaf: false,
}],
}; fetchSelectData = (tableName) => {
// debugger;
this.setState({loading: true});
const query = {
tableName: tableName
};
this.props.exportDataService.findList(query)
.then(arr => {
const options = this.state.options.map(item => {
if (item.value === tableName) {
item.children = arr.map(value => ({value: value, label: value, isLeaf: true}));
}
return item;
});
this.setState({options: options});
});
// .catch(e => this.setState({loading: false}));
// Utils.pushLink(this.props.location.pathname, query);
}; onChange = (values, selectedOptions) => {
console.log(values, selectedOptions); this.setState({
inputValue: selectedOptions.map(o => o.label).join(', '),
});
}; loadData = (selectedOptions) => {
console.log('loadData', selectedOptions); const obj = selectedOptions[0];
if (obj && !obj.isLeaf) {
this.fetchSelectData(obj.value);
}
// const targetOption = selectedOptions[selectedOptions.length - 1];
// targetOption.loading = true;
//
// // load options lazily
// setTimeout(() => {
// targetOption.loading = false;
// targetOption.children = [{
// label: `${targetOption.label} Dynamic 1`,
// value: 'dynamic1',
// }, {
// label: `${targetOption.label} Dynamic 2`,
// value: 'dynamic2',
// }];
// this.setState({
// options: [...this.state.options],
// });
// }, 1000);
}; render() {
const breadcrumbItems = [{
name: '在线填报'
}, {
link: '/reporting/data',
name: '数据维护'
}, {
name: '导出错误数据'
}];
console.log(this.state); let downloadElement ='';
//需要注意这里的取值条件可能有不满足的情况
if(this.state.inputValue && this.state.inputValue.length>6){
const myTime = this.state.inputValue.substring(5);
downloadElement = myTime
? <a href={`/inapi/reportingXzcf/export?time=${myTime}`}><Button type="primary" size="large">导出错误数据</Button></a>
: '';
} return (
<div>
<CustomBreadcrumb global={this.props.global}
globalService={this.props.globalService}
location={this.props.location}
items={breadcrumbItems}/>
<div className="block-box">
<div className="block-box-body clearfix"> <Row gutter={24} style={{marginBottom: "40px", marginLeft: "20px"}}>
<Col className="gutter-row" span={12}>
<div className="ant-row" style={{marginBottom: "40px"}}>
<div className="ant-col-5 ant-form-item-label">
<label htmlFor="CF_WSH" className="ant-form-item-required">请选择</label>
</div>
<Cascader
style={{width: '250px'}}
options={this.state.options}
loadData={this.loadData}
onChange={this.onChange}
changeOnSelect
/>
</div>
</Col> <Col className="gutter-row" span={5}>
{downloadElement}
</Col>
</Row>
</div>
</div>
</div>
);
} }

效果图展示:

antd二级联动异步加载的更多相关文章

  1. Android批量图片加载经典系列——采用二级缓存、异步加载网络图片

    一.问题描述 Android应用中经常涉及从网络中加载大量图片,为提升加载速度和效率,减少网络流量都会采用二级缓存和异步加载机制,所谓二级缓存就是通过先从内存中获取.再从文件中获取,最后才会访问网络. ...

  2. winform TreeView的一些用法以及异步加载

    今天,主要弄了一下对于树型控件的一些方法,以及异步加载.参考: http://www.cnblogs.com/greatverve/archive/2012/03/23/winform-treevie ...

  3. android listview 异步加载图片并防止错位

    网上找了一张图, listview 异步加载图片之所以错位的根本原因是重用了 convertView 且有异步操作. 如果不重用 convertView 不会出现错位现象, 重用 convertVie ...

  4. Android ListView 图片异步加载和图片内存缓存

    开发Android应用经常需要处理图片的加载问题.因为图片一般都是存放在服务器端,需要联网去加载,而这又是一个比较耗时的过程,所以Android中都是通过开启一个异步线程去加载.为了增加用户体验,给用 ...

  5. Listview异步加载之优化篇

    异步加载图片基本思想: 1.      先从内存缓存中获取图片显示(内存缓冲) 2.      获取不到的话从SD卡里获取(SD卡缓冲) 3.      都获取不到的话从网络下载图片并保存到SD卡同时 ...

  6. zTree 异步加载

    zTree异步加载数据的简单实现,更为详细的Api请参考 zTree官网   http://www.treejs.cn/ <link href="~/Content/ztree/css ...

  7. Listview 异步加载图片之优化篇(有图有码有解释)

    在APP应用中,listview的异步加载图片方式能够带来很好的用户体验,同时也是考量程序性能的一个重要指标.关于listview的异步加载,网上其实很多示例了,中心思想都差不多,不过很多版本或是有b ...

  8. 转:web前端面试题合集 (Javascript相关)(js异步加载详解)

    1. HTTP协议的状态消息都有哪些? 1**:请求收到,继续处理2**:操作成功收到,分析.接受3**:完成此请求必须进一步处理4**:请求包含一个错误语法或不能完成5**:服务器执行一个完全有效请 ...

  9. 【jar包】图片的异步加载--【 Imageloader】

    Android Imageloader图片异步加载 Imageloader是一个在android平台下简单的下载.显示.缓存空间的图片加载库. 异步下载网络图片并可以在UI线程更新View,使用二级缓 ...

随机推荐

  1. My97DatePicker(js日期插件) v4.8

    1.下载地址 https://files.cnblogs.com/files/yu-shang/My97DatePicker.zip 2.文档地址 http://my97.net/demo/index ...

  2. Java锁--Condition

    转载请注明出处:http://www.cnblogs.com/skywang12345/p/3496716.html Condition介绍 Condition的作用是对锁进行更精确的控制.Condi ...

  3. 浅谈JavaScript严格模式(use strict)

    "use strict" 的目的是指定代码在严格条件下执行. 严格模式下你不能使用未声明的变量. 严格模式声明 严格模式通过在脚本或函数的头部添加 "use strict ...

  4. 百度ueditor中复制word图文时图片转存任然保持灰色不可用

    官网地址http://ueditor.baidu.com Git 地址 https://github.com/fex-team/ueditor 参考博客地址 http://blog.ncmem.com ...

  5. const char*p,char const*p,char *const p

    转自 http://blog.csdn.net/todd911/article/details/7911995 const char*, char const*, char*const的区别问题几乎是 ...

  6. 图的基本存储的基本方式一(SDUT 3116)

    Problem Description 解决图论问题,首先就要思考用什么样的方式存储图.但是小鑫却怎么也弄不明白如何存图才能有利于解决问题.你能帮他解决这个问题么? Input 多组输入,到文件结尾. ...

  7. Python学习日记(八)—— 模块一(sys、os、hashlib、random、time、RE)

    模块,用一砣代码实现了某个功能的代码集合. 类似于函数式编程和面向过程编程,函数式编程则完成一个功能,其他代码用来调用即可,提供了代码的重用性和代码间的耦合.而对于一个复杂的功能来,可能需要多个函数才 ...

  8. Tecplot中如何计算Ma数(马赫数)【转载】

    转载自:http://blog.163.com/wanglei2146073@126/blog/static/90689607201282555055144/ fluent是我们常用的CFD软件,但由 ...

  9. 方阵转置(c++)

    #include #include using namespace std; int main(int argc,char* argv[]) { int a[4][4]={ {0,1,2,3}, {4 ...

  10. 对@repository,@Service, @Compent,@Controller注解的理解

    注解是没什么本质区别,都是声明作用,取不同的名字只是为了更好区分各自的功能. @Repository 用于标注数据访问组件,即DAO组件 @Service 用于标注业务层组件 @Controller ...