import React from 'react'; import { Icon, Button, Spin, message, Table, Cascader, Input, Modal, DatePicker, Upload, Checkbox } from 'antd'; import { techFieldList, getTechField } from '../../../DicTechFieldList'; import { beforeUpload, getBase64 } from '../../../tools'; import moment from 'moment'; import ajax from 'jquery/src/ajax/xhr.js'; import $ from 'jquery/src/ajax'; const Avatar = React.createClass({ getInitialState() { return { imageUrl: '' } }, handleChange(info) { if (info.file.status === 'done') { // Get this url from response in real world. getBase64(info.file.originFileObj, imageUrl => this.setState({ imageUrl })); this.props.urlData(info.file.response.data); } }, componentWillReceiveProps(nextProps) { if (this.props.uid != nextProps.uid) { this.state.imageUrl = null; }; }, render() { const imageUrl = this.state.imageUrl; return ( <Upload className="avatar-uploader" name={this.props.name} showUploadList={false} action={globalConfig.context + "/api/admin/lecture/upload"} data={{ 'uid': this.props.uid, 'sign': 'lecture_picture' }} beforeUpload={beforeUpload} onChange={this.handleChange} > { (imageUrl || this.props.imageUrl) ? <img src={imageUrl || this.props.imageUrl} role="presentation" id={this.props.name} /> : <Icon type="plus" className="avatar-uploader-trigger" /> } </Upload> ); } }); const Lecture = React.createClass({ loadUserData(pageNo) { this.setState({ loading: true }); $.ajax({ method: "get", dataType: "json", crossDomain: false, url: globalConfig.context + '/api/admin/lecture/starAndExpertList', data: { pageNo: pageNo || 1, pageSize: this.state.userPagination.pageSize, number: this.state.searchUserNumber, //编号 username: this.state.searchUserName, //名称 engagedField: this.state.searchField ? this.state.searchField.join(',') : undefined, professionalTitle: this.state.searchPfs, workUnit: this.state.searchUnit }, success: function (data) { let theArr = []; if (!data.data || !data.data.list) { if (data.error && data.error.length) { message.warning(data.error[0].message); }; } else { for (let i = 0; i < data.data.list.length; i++) { let thisdata = data.data.list[i]; theArr.push({ key: i, uid: thisdata.uid, engagedField: thisdata.engagedField ? thisdata.engagedField.split(',') : [], username: thisdata.username, professionalTitle: thisdata.professionalTitle, workUnit: thisdata.workUnit, number: thisdata.number, achievementNums: thisdata.achievementNums, }); }; this.state.userPagination.current = data.data.pageNo; this.state.userPagination.total = data.data.totalCount; }; this.setState({ userTableData: theArr, userPagination: this.state.userPagination }); }.bind(this), }).always(function () { this.setState({ loading: false }); }.bind(this)); }, loadLectureData(pageNo) { this.setState({ loading: true }); $.ajax({ method: "get", dataType: "json", crossDomain: false, url: globalConfig.context + '/api/admin/lecture/list', data: { pageNo: pageNo || 1, pageSize: this.state.lecturePagination.pageSize, username: this.state.searchLectureUser, //用户名称 name: this.state.searchLectureName, //讲座名称 startLectureTime: this.state.startLectureTime, endLectureTime: this.state.endLectureTime }, success: function (data) { let theArr = []; if (!data.data || !data.data.list) { if (data.error && data.error.length) { message.warning(data.error[0].message); }; } else { for (let i = 0; i < data.data.list.length; i++) { let thisdata = data.data.list[i]; theArr.push({ key: i, id: thisdata.id, uid: thisdata.uid, lectureTime: thisdata.lectureTime, endTime: thisdata.endTime, name: thisdata.name, summary: thisdata.summary, username: thisdata.username, lectureUrl: thisdata.lectureUrl, lectureTimeFormattedDate: thisdata.lectureTimeFormattedDate, endTimeFormattedDate: thisdata.endTimeFormattedDate, hot: thisdata.hot, dynamic: thisdata.dynamic }); }; this.state.lecturePagination.current = data.data.pageNo; this.state.lecturePagination.total = data.data.totalCount; }; this.setState({ lectureTableData: theArr, lecturePagination: this.state.lecturePagination }); }.bind(this), }).always(function () { this.setState({ loading: false }); }.bind(this)); }, loadHotData() { this.setState({ loading: true }); $.ajax({ method: "get", dataType: "json", crossDomain: false, url: globalConfig.context + '/api/admin/lecture/hotList', success: function (data) { let theArr = []; if (!data.data) { if (data.error && data.error.length) { message.warning(data.error[0].message); }; } else { for (let i = 0; i < data.data.length; i++) { let thisdata = data.data[i]; theArr.push({ key: i, id: thisdata.id, uid: thisdata.uid, lectureTime: thisdata.lectureTime, endTime: thisdata.endTime, name: thisdata.name, summary: thisdata.summary, username: thisdata.username, lectureUrl: thisdata.lectureUrl, lectureTimeFormattedDate: thisdata.lectureTimeFormattedDate, endTimeFormattedDate: thisdata.endTimeFormattedDate, hot: thisdata.hot, dynamic: thisdata.dynamic }); }; }; this.setState({ hotTableData: theArr }); }.bind(this), }).always(function () { this.setState({ loading: false }); }.bind(this)); }, loadDynamicData() { this.setState({ loading: true }); $.ajax({ method: "get", dataType: "json", crossDomain: false, url: globalConfig.context + '/api/admin/lecture/dynamic', success: function (data) { let theArr = []; if (!data.data) { if (data.error && data.error.length) { message.warning(data.error[0].message); }; } else { for (let i = 0; i < data.data.length; i++) { let thisdata = data.data[i]; theArr.push({ key: i, id: thisdata.id, uid: thisdata.uid, lectureTime: thisdata.lectureTime, endTime: thisdata.endTime, name: thisdata.name, summary: thisdata.summary, username: thisdata.username, lectureUrl: thisdata.lectureUrl, lectureTimeFormattedDate: thisdata.lectureTimeFormattedDate, endTimeFormattedDate: thisdata.endTimeFormattedDate, hot: thisdata.hot, dynamic: thisdata.dynamic }); }; }; this.setState({ dynamicTableData: theArr }); }.bind(this), }).always(function () { this.setState({ loading: false }); }.bind(this)); }, loadData() { this.loadUserData(); this.loadLectureData(); this.loadHotData(); this.loadDynamicData(); }, getInitialState() { return { loading: false, addVisible: false, addModal: {}, selectedRowKeys: [], selectedRows: [], userPagination: { defaultCurrent: 1, defaultPageSize: 10, showQuickJumper: true, pageSize: 10, onChange: function (page) { this.loadUserData(page); }.bind(this), showTotal: function (total) { return '共' + total + '条数据'; } }, lecturePagination: { defaultCurrent: 1, defaultPageSize: 10, showQuickJumper: true, pageSize: 10, onChange: function (page) { this.loadLectureData(page); }.bind(this), showTotal: function (total) { return '共' + total + '条数据'; } }, userColumns: [ { title: '编号', dataIndex: 'number', key: 'number', }, { title: '姓名', dataIndex: 'username', key: 'username', }, { title: '从事领域', dataIndex: 'engagedField', key: 'engagedField', render: text => { return getTechField(text[0], text[1], text[2]) } }, { title: '职称名字', dataIndex: 'professionalTitle', key: 'professionalTitle', }, { title: '工作单位', dataIndex: 'workUnit', key: 'workUnit', }, { title: '成果数量', dataIndex: 'achievementNums', key: 'achievementNums', } ], lectureColumns: [ { title: '讲堂名称', dataIndex: 'name', key: 'name', }, { title: '开讲人姓名', dataIndex: 'username', key: 'username', }, { title: '描述', dataIndex: 'summary', key: 'summary', width: '50%' }, { title: '开始时间', dataIndex: 'lectureTimeFormattedDate', key: 'lectureTimeFormattedDate', }, { title: '结束时间', dataIndex: 'endTimeFormattedDate', key: 'endTimeFormattedDate', }, { title: '展示图', dataIndex: 'lectureUrl', key: 'lectureUrl', render: text => { if (text) { return '已上传' } else { return '未上传' }; } } ], userTableData: [], lectureTableData: [], hotTableData: [], dynamicTableData: [] }; }, delectRow() { let deletedIds = []; for (let idx = 0; idx < this.state.selectedRows.length; idx++) { let rowItem = this.state.selectedRows[idx]; if (rowItem.id) { deletedIds.push(rowItem.id) }; }; this.setState({ selectedRowKeys: [], loading: deletedIds.length > 0 }); $.ajax({ method: "POST", dataType: "json", crossDomain: false, url: globalConfig.context + "/api/admin/lecture/delete", data: { ids: deletedIds } }).done(function (data) { if (data.error && data.error.length) { message.warning(data.error[0].message); } else { message.success('删除成功!'); this.loadData(); }; this.setState({ loading: false, }); }.bind(this)); }, componentWillMount() { this.loadData(); }, submit() { this.setState({ loading: true }); $.ajax({ method: "post", dataType: "json", crossDomain: false, url: globalConfig.context + (this.state.addModal.id ? '/api/admin/lecture/update' : '/api/admin/lecture/add'), data: { 'id': this.state.addModal.id, "uid": this.state.addModal.uid, "name": this.state.addModal.name, "summary": this.state.addModal.summary, "lectureUrl": this.state.addModal.lectureUrl, "lectureTimeFormattedDate": this.state.addModal.lectureTimeFormattedDate, "endTimeFormattedDate": this.state.addModal.endTimeFormattedDate, "hot": this.state.addModal.showBig ? 1 : 0, "dynamic": this.state.addModal.showStar ? 1 : 0 }, success: function (data) { if (data.error && data.error.length) { message.warning(data.error[0].message); } else { message.success('保存成功!'); this.setState({ addVisible: false }); this.loadData(); }; }.bind(this), }).always(function () { this.setState({ loading: false }); }.bind(this)); }, resetUser() { this.state.searchUserNumber = undefined; this.state.searchUserName = undefined; this.state.searchField = undefined; this.state.searchPfs = undefined; this.state.searchUnit = undefined; this.loadUserData(); }, resetList() { this.state.searchLectureUser = undefined; this.state.searchLectureName = undefined; this.state.startLectureTime = undefined; this.state.endLectureTime = undefined; this.loadLectureData(); }, userTableRowClick(record, index) { this.state.addModal.uid = record.uid; this.state.addModal.username = record.username; this.setState({ addVisible: true }); }, listTableRowClick(record, index) { this.state.addModal = record; this.state.addModal.showBig = record.hot ? true : false; this.state.addModal.showStar = record.dynamic ? true : false; this.setState({ addVisible: true }); }, render() { const rowSelection = { selectedRowKeys: this.state.selectedRowKeys, onChange: (selectedRowKeys, selectedRows) => { this.setState({ selectedRows: selectedRows, selectedRowKeys: selectedRowKeys }); } }; const hasSelected = this.state.selectedRowKeys.length > 0; return ( <div className="admin-content" > <div className="admin-content-title">科技讲堂管理</div> <div className="admin-content-warp"> <div className="admin-content-header">专家明星列表</div> <div className="admin-content-search"> <Input placeholder="编号" style={{ width: 100 }} value={this.state.searchUserNumber} onChange={(e) => { this.setState({ searchUserNumber: e.target.value }); }} /> <Input placeholder="专家明星名称" style={{ width: 160 }} value={this.state.searchUserName} onChange={(e) => { this.setState({ searchUserName: e.target.value }); }} /> <Cascader placeholder="请选择一个行业" style={{ width: 300 }} options={techFieldList} value={this.state.searchField} onChange={(e) => { this.setState({ searchField: e }) }} /> <Input placeholder="职称名字" style={{ width: 160 }} value={this.state.searchPfs} onChange={(e) => { this.setState({ searchPfs: e.target.value }); }} /> <Input placeholder="工作单位" style={{ width: 160 }} value={this.state.searchUnit} onChange={(e) => { this.setState({ searchUnit: e.target.value }); }} /> <Button type="primary" onClick={() => { this.loadUserData() }}>搜索</Button> <Button onClick={this.resetUser}>重置</Button> </div> <Spin spinning={this.state.loading}> <Table columns={this.state.userColumns} dataSource={this.state.userTableData} pagination={this.state.userPagination} onRowClick={this.userTableRowClick} /> </Spin> </div> <div className="admin-content-warp"> <div className="admin-content-header"> <span>讲堂列表</span> <Button type='danger' disabled={!hasSelected} onClick={this.delectRow}> 删除<Icon type="minus" /> </Button> </div> <div className="admin-content-search"> <Input placeholder="开讲人名称" style={{ width: 160 }} value={this.state.searchLectureUser} onChange={(e) => { this.setState({ searchLectureUser: e.target.value }); }} /> <Input placeholder="讲座标题" style={{ width: 160 }} value={this.state.searchLectureName} onChange={(e) => { this.setState({ searchLectureName: e.target.value }); }} /> <span>开始时间</span> <DatePicker showTime format="YYYY-MM-DD HH:mm:ss" placeholder="选择开始搜索时间" value={this.state.startLectureTime ? moment(this.state.startLectureTime, "YYYY-MM-DD HH:mm:ss") : undefined} onChange={(t, str) => { this.setState({ startLectureTime: str }); }} /> <span>到</span> <DatePicker showTime format="YYYY-MM-DD HH:mm:ss" placeholder="选择结束搜索时间" value={this.state.endLectureTime ? moment(this.state.endLectureTime, "YYYY-MM-DD HH:mm:ss") : undefined} onChange={(t, str) => { this.setState({ endLectureTime: str }); }} /> <Button type="primary" onClick={() => { this.loadLectureData() }}>搜索</Button> <Button onClick={this.resetList}>重置</Button> </div> <Spin spinning={this.state.loading}> <Table columns={this.state.lectureColumns} dataSource={this.state.lectureTableData} rowSelection={rowSelection} onRowClick={this.listTableRowClick} pagination={this.state.lecturePagination} /> </Spin> </div> <div className="clearfix"> <div className="admin-content-warp" style={{ width: '50%', float: 'left' }}> <div className="admin-content-header"> <span>大咖页列表</span> </div> <Spin spinning={this.state.loading}> <Table columns={this.state.lectureColumns} dataSource={this.state.hotTableData} onRowClick={this.listTableRowClick} pagination={false} /> </Spin> </div> <div className="admin-content-warp" style={{ width: '50%', float: 'left' }}> <div className="admin-content-header"> <span>明星动态列表</span> </div> <Spin spinning={this.state.loading}> <Table columns={this.state.lectureColumns} dataSource={this.state.dynamicTableData} onRowClick={this.listTableRowClick} pagination={false} /> </Spin> </div> </div> <Modal title="科技讲堂详情" width={600} visible={this.state.addVisible} maskClosable={false} footer={null} afterClose={() => { this.state.addModal = {} }} onCancel={() => { this.setState({ addVisible: false }) }} > <Spin spinning={this.state.loading}> <div className="modal-box"> <span className="modal-box-title">开讲人</span> <div className="modal-box-detail"> {this.state.addModal.username} </div> </div> <div className="modal-box"> <span className="modal-box-title">讲堂标题</span> <div className="modal-box-detail"> <Input value={this.state.addModal.name} onChange={(e) => { this.state.addModal.name = e.target.value; this.setState({ addModal: this.state.addModal }); }} /> </div> </div> <div className="modal-box"> <span className="modal-box-title">讲堂描述</span> <div className="modal-box-detail"> <Input type="textarea" value={this.state.addModal.summary} rows={4} onChange={(e) => { this.state.addModal.summary = e.target.value; this.setState({ addModal: this.state.addModal }); }} /> </div> </div> <div className="modal-box"> <span className="modal-box-title">开讲时间</span> <div className="modal-box-detail"> <DatePicker showTime format="YYYY-MM-DD HH:mm:ss" placeholder="选择开始时间" value={this.state.addModal.lectureTimeFormattedDate ? moment(this.state.addModal.lectureTimeFormattedDate, "YYYY-MM-DD HH:mm:ss") : undefined} onChange={(t, str) => { this.state.addModal.lectureTimeFormattedDate = str; this.setState({ addModal: this.state.addModal }); }} /> <span>到</span> <DatePicker showTime format="YYYY-MM-DD HH:mm:ss" placeholder="选择结束时间" value={this.state.addModal.endTimeFormattedDate ? moment(this.state.addModal.endTimeFormattedDate, "YYYY-MM-DD HH:mm:ss") : undefined} onChange={(t, str) => { this.state.addModal.endTimeFormattedDate = str; this.setState({ addModal: this.state.addModal }); }} /> </div> </div> <div className="modal-box"> <span className="modal-box-title">讲堂图片</span> <div className="modal-box-detail clearfix"> <Avatar uid={this.state.addModal.uid} imageUrl={this.state.addModal.lectureUrl ? (globalConfig.avatarHost + "/upload" + this.state.addModal.lectureUrl) : null} urlData={(url) => { this.state.addModal.lectureUrl = url }} /> </div> </div> <div className="modal-box"> <span className="modal-box-title">其他选项</span> <div className="modal-box-detail clearfix"> <Checkbox checked={this.state.addModal.showBig} onChange={(e) => { this.state.addModal.showBig = e.target.checked; this.setState({ addModal: this.state.addModal }); }}>显示到大咖说</Checkbox> <Checkbox checked={this.state.addModal.showStar} onChange={(e) => { this.state.addModal.showStar = e.target.checked; this.setState({ addModal: this.state.addModal }); }}>显示到明星动态</Checkbox> </div> </div> <div className="modal-box"> <Button type="primary" onClick={this.submit}>提交</Button> <Button type="ghost" onClick={() => { this.setState({ addVisible: false }) }}>取消</Button> </div> </Spin> </Modal> </div> ); } }); export default Lecture;