From 67cdefdb6c4317076224c7239dc89ff96195a5f2 Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Sun, 5 May 2019 22:05:08 +0800
Subject: [PATCH] =?UTF-8?q?=E5=89=8D=E7=AB=AF=EF=BC=9A=E5=A2=9E=E5=8A=A0?=
 =?UTF-8?q?=E5=AF=8C=E6=96=87=E6=9C=AC=E5=91=A2=E7=BC=96=E8=BE=91=E5=99=A8?=
 =?UTF-8?q?=EF=BC=8C=E9=87=87=E7=94=A8=20braft-editor=20=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/Image/PicturesWall.js      |  3 +-
 .../pages/Product/ProductSpuAddOrUpdate.js    | 80 ++++++++++++++++++-
 .../功能列表/功能列表-管理后台.md |  2 +-
 3 files changed, 82 insertions(+), 3 deletions(-)

diff --git a/admin-web/src/components/Image/PicturesWall.js b/admin-web/src/components/Image/PicturesWall.js
index 4011db04..e8b4176e 100644
--- a/admin-web/src/components/Image/PicturesWall.js
+++ b/admin-web/src/components/Image/PicturesWall.js
@@ -77,6 +77,7 @@ class PicturesWall extends React.Component {
     // });
 
     // 使用 FileReader 将上传的文件转换成二进制流，满足 'application/octet-stream' 格式的要求
+    debugger;
     const reader = new FileReader();
     reader.readAsArrayBuffer(file);
     let fileData = null;
@@ -101,7 +102,7 @@ class PicturesWall extends React.Component {
       // })
       //   .catch(onError);
       let key = uuid.v4(); // TODO 芋艿，可能后面要优化。MD5？
-      let observable = qiniu.upload(file, key, this.state.token); // TODO 芋艿，最后后面去掉 qiniu 的库依赖，直接 http 请求，这样更轻量
+      let observable = qiniu.upload(e, key, this.state.token); // TODO 芋艿，最后后面去掉 qiniu 的库依赖，直接 http 请求，这样更轻量
       observable.subscribe(function () {
         // next
       }, function () {
diff --git a/admin-web/src/pages/Product/ProductSpuAddOrUpdate.js b/admin-web/src/pages/Product/ProductSpuAddOrUpdate.js
index 93963f17..2b0816c1 100644
--- a/admin-web/src/pages/Product/ProductSpuAddOrUpdate.js
+++ b/admin-web/src/pages/Product/ProductSpuAddOrUpdate.js
@@ -7,6 +7,10 @@ import { connect } from 'dva';
 import moment from 'moment';
 import {Card, Form, Input, Radio, Button, Modal, Select, Upload, Icon, Spin} from 'antd';
 import PageHeaderWrapper from '@/components/PageHeaderWrapper';
+import 'braft-editor/dist/index.css'
+import BraftEditor from 'braft-editor'
+import { ContentUtils } from 'braft-utils'
+import { ImageUtils } from 'braft-finder'
 
 // import * as qiniu from 'qiniu-js'
 // import uuid from 'js-uuid';
@@ -16,6 +20,9 @@ import ProductAttrSelectFormItem from "../../components/Product/ProductAttrSelec
 import ProductSkuAddOrUpdateTable from "../../components/Product/ProductSkuAddOrUpdateTable";
 // import {fileGetQiniuToken} from "../../services/admin";
 import PicturesWall from "../../components/Image/PicturesWall";
+import {fileGetQiniuToken} from "../../services/admin";
+import uuid from "js-uuid";
+import * as qiniu from "qiniu-js";
 
 const FormItem = Form.Item;
 const RadioGroup = Radio.Group;
@@ -40,6 +47,7 @@ class ProductSpuAddOrUpdate extends Component {
     // modalVisible: false,
     modalType: 'add', //add update
     // initValues: {},
+    editorState: BraftEditor.createEditorState(null),
   };
 
   componentDidMount() {
@@ -76,6 +84,47 @@ class ProductSpuAddOrUpdate extends Component {
     })
   }
 
+  handleChange = (editorState) => {
+    this.setState({ editorState })
+  };
+
+  uploadHandler = async (param) => {
+    if (!param.file) {
+      return false
+    }
+    debugger;
+    const tokenResult = await fileGetQiniuToken();
+    if (tokenResult.code !== 0) {
+      alert('获得七牛上传 Token 失败');
+      return false;
+    }
+    let token = tokenResult.data;
+    let that = this;
+    const reader = new FileReader();
+    const file = param.file;
+    reader.readAsArrayBuffer(file);
+    let fileData = null;
+    reader.onload = (e) => {
+      let key = uuid.v4(); // TODO 芋艿，可能后面要优化。MD5？
+      let observable = qiniu.upload(file, key, token); // TODO 芋艿，最后后面去掉 qiniu 的库依赖，直接 http 请求，这样更轻量
+      observable.subscribe(function () {
+        // next
+      }, function (e) {
+        // error
+        // TODO 芋艿，后续补充
+        // debugger;
+      }, function (response) {
+        // complete
+        that.setState({
+          editorState: ContentUtils.insertMedias(that.state.editorState, [{
+            type: 'IMAGE',
+            url: 'http://static.shop.iocoder.cn/' + response.key,
+          }])
+        })
+      });
+    }
+  };
+
   handleAddAttr = e => {
     // alert('你猜');
     const { dispatch } = this.props;
@@ -154,6 +203,25 @@ class ProductSpuAddOrUpdate extends Component {
     // debugger;
     const { form, skus, attrTree, allAttrTree, loading, spu, dispatch } = this.props;
     // const that = this;
+    const controls = ['bold', 'italic', 'underline', 'text-color', 'separator', 'link', 'separator'];
+    const extendControls = [
+      {
+        key: 'antd-uploader',
+        type: 'component',
+        component: (
+          <Upload
+            accept="image/*"
+            showUploadList={false}
+            customRequest={this.uploadHandler}
+          >
+            {/* 这里的按钮最好加上type="button"，以避免在表单容器中触发表单提交，用Antd的Button组件则无需如此 */}
+            <button type="button" className="control-item button upload-button" data-title="插入图片">
+              <Icon type="picture" theme="filled" />
+            </button>
+          </Upload>
+        )
+      }
+    ];
 
     // 添加规格
     // debugger;
@@ -243,7 +311,17 @@ class ProductSpuAddOrUpdate extends Component {
                 {form.getFieldDecorator('description', {
                   rules: [{ required: true, message: '请输入商品描述！' }],
                   initialValue: spu.description, // TODO 修改
-                })(<Input.TextArea placeholder="请输入" />)}
+                })(
+                  <div style={{border: '1px solid #d1d1d1', 'border-radius': '5px'}}>
+                    <BraftEditor
+                      value={this.state.editorState}
+                      onChange={this.handleChange}
+                      controls={controls}
+                      extendControls={extendControls}
+                      contentStyle={{height: 200}}
+                    />
+                  </div>
+                )}
                 <Button type="primary" htmlType="submit" style={{ marginLeft: 8 }} onSubmit={this.handleSubmit}>保存</Button>
               </FormItem>
             </Form>
diff --git a/docs/guides/功能列表/功能列表-管理后台.md b/docs/guides/功能列表/功能列表-管理后台.md
index 0d221cdf..e8290813 100644
--- a/docs/guides/功能列表/功能列表-管理后台.md
+++ b/docs/guides/功能列表/功能列表-管理后台.md
@@ -11,7 +11,7 @@
 - [ ] 商品管理
     - [ ] 发布商品
     - [ ] 商品管理
-    - [ ] 展示类目
+    - [x] 展示类目
     - [ ] 品牌管理
 - [ ] 订单管理
     - [ ] 销售单