joywok-material-components
Version:
<h1 align="center"> Joywok Material Components </h1>
401 lines (396 loc) • 15.4 kB
JavaScript
import React, { PropTypes, Component } from 'react';
import { Link } from 'react-router';
import { connect } from 'dva';
import { Button, Dialog, DialogTitle, DialogContent, DialogActions, FormControlLabel,Checkbox } from '@material-ui/core';
import { AloneTip } from 'joywok-material-components';
import { DatePicker} from 'antd';
const { RangePicker } = DatePicker;
const dateFormat = 'YYYY-MM-DD HH:mm';
import 'moment/locale/en-gb';
import locale_en from 'antd/lib/date-picker/locale/en_US';
import locale_zh from 'antd/lib/date-picker/locale/zh_CN';
import request from './../utils/request';
import { CombineShareModal } from './CombineShareModal';
import { COMPONENT_DICT } from '../constants';
require('./style/index.css');
class ExportMedia extends React.Component {
constructor(props) {
super(props);
this.state = {
openAddModal: false,
apptype: props.apptype, //应用类型
oids: [], //对象列表
file_types: ['video'], //文件类型:视频、音频
start_time: this.getFirstDay()/1000, //开始时间
end_time: Date.parse(new Date())/1000, //结束时间
curOids: [],
match_str: '',
pageno: 0,
loadMore: true,
listData: [],
openReport: false, // 前往报表中心Dialog
};
}
addData(){
let self = this;
if(this.props.apptype!="jw_app_subscribe"){
this.setState({
openAddModal: true
})
let params = {
apptype: this.state.apptype,
match_str: '',
pageno: 0,
pagesize: 20,
file_types: this.state.file_types
}
request('/api/log/objlist', {
method: 'POST',
body: JSON.stringify(params)
}).then(function (resp) {
self.setState({
listData: resp.data.JMMedialog
})
})
}else{
let params = {
title: COMPONENT_DICT('label.export.media.add.articles'),
objTypes: 'subscribe_articles',
searchInput: true,
select: this.state.listData,
file_types: this.state.file_types
}
let a = CombineShareModal(params);
a.events.on('save', function (objs) {
self.setState({
listData: objs,
curOids: objs,
oids: objs
})
})
a.events.on('cancel', function (objs) {
})
}
}
// 获取本月第一天时间戳
getFirstDay(){
let time = new Date();
time.setDate(1);
time.setHours(0);
time.setSeconds(0);
time.setMinutes(0);
return time.getTime()
}
changeCheckbox(e,type){
let file_types = this.state.file_types;
if(e.target.checked){
file_types.push(type)
}else{
let index = _.indexOf(file_types,type);
file_types.splice(index,1);
}
this.setState({
file_types: file_types
})
}
closeModal(){
this.props.onChange()
// this.setState({
// openAddModal: false
// })
}
// 时间戳转换
formatDate(value) {
let getDate = new Date(parseInt(value * 1000))
let year = getDate.getFullYear();
let month = getDate.getMonth() + 1 < 10 ? '0' + Number(getDate.getMonth() + 1) : getDate.getMonth() + 1;
let day = getDate.getDate() < 10 ? '0' + getDate.getDate() : getDate.getDate();
let h = getDate.getHours() < 10 ? '0' + getDate.getHours() : getDate.getHours();
let m = getDate.getMinutes() < 10 ? '0' + getDate.getMinutes() : getDate.getMinutes();
let str = year + '-' + month + '-' + day + ' ' + h + ':' + m;
return str;
}
// 修改操作时间
changeDate(e){
let startTime = new Date(this.formatDate(e[0]['_d'])).getTime() / 1000000,
endTime = new Date(this.formatDate(e[1]['_d'])).getTime() / 1000000;
this.setState({
start_time: parseInt(startTime),
end_time: parseInt(endTime)
})
}
// 问卷列表搜索
searchData(e){
let self = this;
this.setState({
match_str: e.target.values
})
let params = {
apptype: this.state.apptype,
match_str: e.target.value,
pageno: 0,
pagesize: 20,
file_types: this.state.file_types
}
request('/api/log/objlist', {
method: 'POST',
body: JSON.stringify(params)
}).then(function (resp) {
self.setState({
listData: resp.data.JMMedialog
})
})
}
// 选择问卷数据
selectData(e,items,indexs){
let oids = this.state.oids;
if(e.target.checked){
oids.push(items)
}else{
oids = _.reject(oids,{oid: items.oid})
}
this.setState({
oids: oids
})
}
deleteData(items,indexs){
let data = this.state.curOids;
data.splice(indexs,1)
this.setState({
curOids: data
})
}
// 选中问卷
selectSurvey(){
this.setState({
openAddModal: false,
curOids: this.state.oids
})
}
// 导出多媒体
exportMedia(){
let newOids = [];
let cur_time = Date.parse(new Date())/1000;
let self = this;
_.each(this.state.oids,function(item){
newOids.push(item.oid)
})
if(Date.parse(new Date())/1000<this.state.end_time/1000){
AloneTip({ type: 'error', duration: 2000, hasclose: false, autoHideDuration: 2000, message: COMPONENT_DICT('label.export.media.endtime.check') })
}else{
let params = {
apptype: this.state.apptype,
oids: newOids,
start_time: this.state.start_time,
end_time: this.state.end_time,
file_types: this.state.file_types
}
request('/api/log/exportmedia', {
method: 'POST',
body: JSON.stringify(params)
}).then(function (resp) {
if(resp.data.JMStatus.code===0){
self.props.onChange()
self.setState({
openReport: true
})
}
})
}
}
goReport(){
window.location.href = window.location.origin+'/webportal#/templist'
}
componentDidMount() {
}
componentWillReceiveProps(nextProps){
if(nextProps.open){
this.setState({
file_types: ['video'],
oids: [],
curOids: [],
listData: [],
start_time: this.getFirstDay()/1000,
end_time: Date.parse(new Date())/1000,
})
}
}
componentDidUpdate(){
let self = this;
// 列表分页
if ($('.jw-export-media-data-w')[0]) {
setTimeout(function () {
$('.jw-export-media-data-w').unbind('scroll').on('scroll', () => {
let clientHeight = $('.jw-export-media-data-w')[0].scrollHeight;
let scrollTop = $('.jw-export-media-data-w').scrollTop();
let height = $('.jw-export-media-data-w').height();
if (scrollTop + height + 25 >= clientHeight) {
if (self.state.loadMore) {
self.setState({
pageno: self.state.pageno + 1,
}, () => {
let params = {
apptype: self.state.apptype,
match_str: self.state.match_str,
pageno: self.state.pageno,
pagesize: 20,
file_types: self.state.file_types
}
request('/api/log/objlist', {
method: 'POST',
body: JSON.stringify(params)
}).then(function (resp) {
self.setState({
listData: self.state.listData.concat(resp.data.JMMedialog),
},()=>{
self.setState({
loadMore: self.state.listData.length===resp.data.JMStatus.total_num? false : true,
})
})
})
})
}
}
})
},300)
}
}
render() {
let self = this;
let { apptype, oids, file_types, start_time, end_time, curOids } = this.state;
let listData = this.state.listData;
// console.log("oids:::",oids,"listData::::",listData)
return (
<div>
<Dialog
open={this.props.open}
className={"jw-export-media-w " + this.props.theme}
maxWidth="md"
onClose={()=>this.closeModal()}
>
<DialogTitle className={"jw-export-media-title"}>
{COMPONENT_DICT('label.export.media.title')}
<i className="icon-close-big" onClick={()=>this.closeModal()}></i>
</DialogTitle>
<DialogContent className="jw-export-media-content-w">
<div className="jw-export-media-content">
<span className="title">{COMPONENT_DICT('label.export.media.type')}</span>
<FormControlLabel
control={<Checkbox className={"jw-export-media-checkbox " + (_.indexOf(file_types,'video')!=-1 ? 'jw-export-media-checkbox-selected ' : '') + (file_types.length==1&&file_types[0]=='video' ? 'jw-export-media-checkbox-disabled' : '')} checked={_.indexOf(file_types,'video')!=-1 ? true : false} disabled={file_types.length==1&&file_types[0]=='video' ? true : false} onChange={(e,type) => this.changeCheckbox(e,'video')} />}
label={COMPONENT_DICT('label.export.media.video')}
/>
<FormControlLabel
control={<Checkbox className={"jw-export-media-checkbox " +(_.indexOf(file_types,'audio')!=-1 ? 'jw-export-media-checkbox-selected ' : '')+ (file_types.length==1&&file_types[0]=='audio' ? 'jw-export-media-checkbox-disabled' : '')} onChange={(e,type) => this.changeCheckbox(e,'audio')} checked={_.indexOf(file_types,'audio')!=-1 ? true : false} disabled={file_types.length==1&&file_types[0]=='audio' ? true : false}/>}
label={COMPONENT_DICT('label.export.media.audio')}
/>
</div>
<div className="jw-export-media-content">
<span className="title title-middle">{this.props.title}</span>
<div className="content-w">
{
_.map(curOids,function(item,index){
return(
<div className="content">
<p className="name">{item.name}</p>
<i className="icon-delete-data" onClick={(items,indexs)=>self.deleteData(item,index)}></i>
<p className="time">{self.formatDate(item.created_at)}</p>
</div>
)
})
}
<span className={"add-btn " + (curOids.length>0 ? 'add-btn-margin' : '')} onClick={()=>this.addData()}><i className={this.props.theme=='blue' ? "icon-add-admin" : 'icon-add-item'}></i> <span className={"add-btn-text"} style={{color: this.props.theme=='blue' ? '#3297FC' : '#00C78B'}}>{COMPONENT_DICT('label.export.media.add.btn')}</span></span>
</div>
</div>
<div className="jw-export-media-content">
<span className="title">{COMPONENT_DICT('label.export.media.operating.time')}</span>
<RangePicker
defaultValue={[moment(new Date(Date.parse(new Date(start_time*1000))), dateFormat), moment(new Date(Date.parse(new Date(end_time*1000))), dateFormat)]}
showTime={{ format: 'HH:mm' }}
placeholder={[i18n('lable.console.emoji.subject.start-date'), i18n('lable.console.emoji.subject.end-time')]}
format={dateFormat}
onOk={(e) => this.changeDate(e)}
locale={cur_lang == 'zh-cn' ? locale_zh : locale_en}
dropdownClassName={"jw-export-media-rangepicker"}
/>
</div>
</DialogContent>
<DialogActions className="jw-export-media-footer">
<Button key="back" onClick={()=>this.closeModal()}>
{COMPONENT_DICT('label.business.shareobj.cancel')}
</Button>,
<Button key="submit" type="primary" onClick={()=>this.exportMedia()}>
{COMPONENT_DICT('label.export.media.export')}
</Button>
</DialogActions>
</Dialog>
<Dialog
open={this.state.openAddModal}
maxWidth="md"
className={"jw-export-media-w jw-export-media-w1 " + this.props.theme}
onClose={() => this.setState({openAddModal:false})}
>
<DialogTitle className={"jw-export-media-title"}>
{this.props.title}
<i className="icon-close-big" onClick={()=>this.closeModal()}></i>
</DialogTitle>
<DialogContent className="jw-export-media-w1-content">
<div className="jw-export-media-search">
<input placeholder={COMPONENT_DICT('label.business.shareobj.search')} type="text" onChange={(e)=>this.searchData(e)} />
<i className="icon-search"></i>
</div>
{
listData&&listData.length==0 ? <p className="jw-export-media-empty">{COMPONENT_DICT('label.export.media.nodata')}</p> :
<div className="jw-export-media-data-w">
{
_.map(listData,function(item,index){
return <div className="jw-export-media-data">
<FormControlLabel
control={<Checkbox className={_.filter(self.state.oids,{oid: item.oid}).length>0 ? 'jw-export-media-checkbox-selected' : ''} onChange={(e,items) => self.selectData(e,item)} checked={_.filter(self.state.oids,{oid: item.oid}).length>0 ? true : false} />}
/>
<div className="jw-export-media-data-right">
<p className="data-name">{item.name}</p>
<p className="data-time">{self.formatDate(item.created_at)}</p>
</div>
</div>
})
}
</div>
}
</DialogContent>
<DialogActions className="jw-export-media-footer" style={{marginBottom:'13px'}}>
<Button key="back" onClick={() => this.setState({openAddModal:false, oids: [], curOids: []})}>
{COMPONENT_DICT('label.business.shareobj.cancel')}
</Button>,
<Button key="submit" type="primary" onClick={() => this.selectSurvey()}>
{COMPONENT_DICT('label.export.media.selected')}
</Button>
</DialogActions>
</Dialog>
<Dialog
open={this.state.openReport}
className={"jw-export-media-w2 " + this.props.theme}
onClose={() => this.setState({openReport:false})}
>
<DialogTitle className={"jw-export-media-title"}>
{COMPONENT_DICT('label.export.media.generate.file')}
<i className="icon-close-big" onClick={() => this.setState({openReport:false})}></i>
</DialogTitle>
<DialogContent className="jw-export-media-w2-content">
{COMPONENT_DICT('label.export.media.go.report')}
</DialogContent>
<DialogActions className="jw-export-media-footer" style={{marginBottom:'13px'}}>
<Button key="back" onClick={() => this.setState({openReport:false})}>
{COMPONENT_DICT('label.export.media.know')}
</Button>,
<Button key="submit" type="primary" onClick={() => this.goReport()}>
{COMPONENT_DICT('label.export.media.go')}
</Button>
</DialogActions>
</Dialog>
</div>
);
}
}
export default connect(function (state) {
return state;
})(ExportMedia);