yee 7 роки тому
батько
коміт
557eeafe89

+ 13 - 0
js/component/manageCenter/idea/content.less

@@ -59,6 +59,19 @@
     }
 }
 
+.news-modal {
+    .ant-modal-header {
+        display: none
+    }
+    .ant-modal-close {
+        top: 10px;
+    }
+    .quill {
+        margin-bottom: 20px;
+        min-height: 400px;
+    }
+}
+
 .avatar-uploader,
 .avatar-uploader-trigger,
 .avatar {

+ 90 - 15
js/component/manageCenter/idea/news/news.jsx

@@ -1,11 +1,40 @@
 import React from 'react';
 import { Icon, Button, Spin, message, Table, Input, Modal, DatePicker, Upload, Select, Radio, Tabs } from 'antd';
 import { beforeUpload, getBase64 } from '../../../tools';
-//import Editors from './richTextEditors';
+import theme from 'react-quill/dist/quill.snow.css'
+import ReactQuill from 'react-quill'
 import moment from 'moment';
 import ajax from 'jquery/src/ajax/xhr.js';
 import $ from 'jquery/src/ajax';
 
+var theThis = null;
+function uploadImg(s) {
+    let myform = new FormData(), _me = s;
+    myform.append('file', document.getElementById("fileToUpload").files[0]);
+    myform.append('sign', 'news_content_picture');
+    $.ajax({
+        method: "post",
+        dataType: "json",
+        url: location.origin + "/api/admin/news/upload",
+        data: myform,
+        contentType: false,
+        processData: false,
+        success: function (data) {
+            if (data.error && data.error.length) {
+                message.warning(data.error[0].message);
+            } else {
+                let theUrl = data.data;
+                const cursorPosition = theThis.quill.getSelection().index
+                theThis.quill.insertText(cursorPosition, '<img src="' + globalConfig.avatarHost + '/upload' + theUrl + '" />')
+                theThis.quill.setSelection(cursorPosition + 1)
+            };
+        }
+    })
+}
+function fileSelect() {
+    document.getElementById("fileToUpload").click();
+    theThis = this;
+}
 const Avatar = React.createClass({
     getInitialState() {
         return {
@@ -20,7 +49,7 @@ const Avatar = React.createClass({
         }
     },
     componentWillReceiveProps(nextProps) {
-        if (this.props.id != nextProps.id) {
+        if (this.props.visible && !nextProps.visible) {
             this.state.imageUrl = null;
         };
     },
@@ -31,7 +60,7 @@ const Avatar = React.createClass({
                 className="avatar-uploader"
                 name={this.props.name}
                 showUploadList={false}
-                action={globalConfig.context + "/api/admin/banners/upload"}
+                action={globalConfig.context + "/api/admin/news/upload"}
                 data={{ 'sign': this.props.sign }}
                 beforeUpload={beforeUpload}
                 onChange={this.handleChange} >
@@ -46,7 +75,7 @@ const Avatar = React.createClass({
 });
 
 const News = React.createClass({
-    loadData(pageNo) {
+    loadData(pageNo, theType) {
         this.setState({
             loading: true
         });
@@ -58,7 +87,7 @@ const News = React.createClass({
             data: {
                 pageNo: pageNo || 1,
                 pageSize: this.state.pagination.pageSize,
-                type: this.props.newsType || 0, //新闻类型
+                type: theType || this.props.newsType || 0, //新闻类型
                 title: this.state.searchTitle,
                 author: this.state.searchAuthor,
                 startCreateTime: this.state.startDate, //新闻开始时间 yyyy-MM-dd
@@ -77,6 +106,7 @@ const News = React.createClass({
                         let thisdata = data.data.list[i];
                         theArr.push({
                             key: i,
+                            id: thisdata.id,
                             createTime: thisdata.createTime,
                             editTime: thisdata.editTime,
                             title: thisdata.title,
@@ -164,8 +194,8 @@ const News = React.createClass({
                     width: '20%'
                 }, {
                     title: '发布时间',
-                    dataIndex: 'editTime',
-                    key: 'editTime',
+                    dataIndex: 'createTimeFormattedDate',
+                    key: 'createTimeFormattedDate',
                 }, {
                     title: '作者',
                     dataIndex: 'author',
@@ -194,6 +224,16 @@ const News = React.createClass({
     componentWillMount() {
         this.loadData();
     },
+    componentWillReceiveProps(nextProps) {
+        if (this.props.newsType != nextProps.newsType) {
+            this.loadData(1, nextProps.newsType);
+        };
+    },
+    handleRichText(value) {
+        console.log(value);
+        this.state.RowData.content = value;
+        this.setState({ RowData: this.state.RowData });
+    },
     submit() {
         if (!this.state.RowData.title) {
             message.warning('必须填写一个标题!');
@@ -290,6 +330,37 @@ const News = React.createClass({
             }
         };
         const hasSelected = this.state.selectedRowKeys.length > 0;
+        const modules = {
+            toolbar: {
+                container: [
+                    [{ 'size': ['small', false, 'large', 'huge'] }],  // custom dropdown
+                    [{ 'header': [1, 2, 3, false] }],
+
+                    ['bold', 'italic', 'underline', 'strike', 'blockquote'],        // toggled buttons
+
+                    //  [{ 'header': 1 }, { 'header': 2 }],               // custom button values
+                    [{ 'list': 'ordered' }, { 'list': 'bullet' }],
+                    //  [{ 'script': 'sub' }, { 'script': 'super' }],      // superscript/subscript
+                    [{ 'indent': '-1' }, { 'indent': '+1' }],          // outdent/indent
+                    //  [{ 'direction': 'rtl' }],                         // text direction
+
+                    [{ 'color': [] }, { 'background': [] }],          // dropdown with defaults from theme
+                    //  [{ 'font': [] }],
+                    [{ 'align': [] }],
+                    ['link', 'image'],
+                    ['clean']
+                ],
+                handlers: { 'image': fileSelect }
+            }
+        };
+        const formats = [
+            'size', 'header',
+            'bold', 'italic', 'underline', 'strike', 'blockquote',
+            'list', 'bullet', 'indent',
+            'color', 'background',
+            'align',
+            'link', 'image'
+        ];
         return (
             <div className="admin-content" >
                 <div className="admin-content-title">科技快讯管理</div>
@@ -346,7 +417,7 @@ const News = React.createClass({
                             onRowClick={this.tableRowClick} />
                     </Spin>
                 </div>
-                <Modal title="新闻详情" width={600}
+                <Modal title="新闻详情" width={600} className="news-modal"
                     visible={this.state.visible}
                     maskClosable={false}
                     footer={null}
@@ -370,7 +441,7 @@ const News = React.createClass({
                                 <div className="modal-box">
                                     <span className="modal-box-title">标题图片</span>
                                     <div className="modal-box-detail clearfix">
-                                        <Avatar sign={this.state.RowData.sign} id={this.state.RowData.id}
+                                        <Avatar sign={'news'} visible={this.state.visible}
                                             imageUrl={this.state.RowData.titleImg ? (globalConfig.avatarHost + "/upload" + this.state.RowData.imgurl) : null}
                                             urlData={(url) => { this.state.RowData.titleImg = url }} />
                                     </div>
@@ -442,12 +513,16 @@ const News = React.createClass({
                                 </div>
                             </Tabs.TabPane>
                             <Tabs.TabPane tab="详情" key="2">
-                                <div className="modal-box">
-                                    <span className="modal-box-title">内容详情</span>
-                                    <div className="modal-box-detail">
-
-                                    </div>
-                                </div>
+                                <ReactQuill theme="snow"
+                                    value={this.state.RowData.content}
+                                    modules={modules}
+                                    formats={formats}
+                                    onChange={this.handleRichText} />
+                                <input type="file"
+                                    name="fileToUpload"
+                                    id="fileToUpload"
+                                    style={{ "display": "none" }}
+                                    onChange={() => { uploadImg(modules.toolbar) }} />
                             </Tabs.TabPane>
                         </Tabs>
                         <div className="modal-box">