feats

config/config.js

@@ -3,6 +3,9 @@ import routes from './routes';
 
 import slash from 'slash2';
 import webpackPlugin from './plugin.config';
+
+const path = require('path');
+
 const { pwa, primaryColor } = defaultSettings; // preview.pro.ant.design only do not use in your production ;
 // preview.pro.ant.design 专用环境变量，请不要在你的项目中使用它。
 
@@ -131,6 +134,10 @@ export default {
   },
   chainWebpack: webpackPlugin,
 
+  alias: {
+    '@/': path.resolve(__dirname, 'src/')
+  },
+
   proxy: {
     '/api': {
       target: 'http://localhost:8080/',

package.json

@@ -61,7 +61,8 @@
     "umi": "^2.8.7",
     "umi-plugin-pro-block": "^1.3.2",
     "umi-plugin-react": "^1.9.5",
-    "umi-request": "^1.0.8"
+    "umi-request": "^1.0.8",
+    "wangeditor": "^4.2.1"
   },
   "devDependencies": {
     "@ant-design/colors": "^3.1.0",

src/components/Wangedit/Wangedit.jsx

@@ -0,0 +1,115 @@
+import React from 'react';
+import E from 'wangeditor';
+import { fetch, apis } from '../../utils/request';
+
+/**
+ * @param {*} props
+ * @returns
+ */
+class Wangedit extends React.Component {
+  state = {
+    html: undefined,
+    contenteditable: this.props.contenteditable == false ? false : true
+  }
+  editorRef = React.createRef()
+  editor = undefined;
+
+  render() {
+    return (
+      <div ref={this.editorRef} style={{ textAlign: 'left' }}>
+      </div>
+    );
+  }
+
+  componentDidUpdate(preProps) {
+    if (preProps.value != this.props.value) {
+      if (this.editor) {
+        this.editor.txt.html(this.props.value)
+      }
+    }
+  }
+
+  componentDidMount() {
+    const elem = this.editorRef.current
+    this.editor = new E(elem)
+    // 使用 onchange 函数监听内容的变化
+    this.editor.config.onchange = html => {
+      this.setState({ html })
+
+      if (typeof this.props.onChange === 'function') {
+        this.props.onChange(html)
+      }
+    }
+    this.editor.config.zIndex = 100
+    this.editor.config.uploadImgMaxLength = 1
+    this.editor.config.customUploadImg = function (files, insert) {
+      if (!files.length) return
+      
+      const data = new FormData()
+      data.append('file', files[0])
+
+      fetch(apis.image.upload)({data}).then(insert)
+    }
+    this.editor.config.menus = [
+      'head',  // 标题
+      'bold',  // 粗体
+      'fontSize',  // 字号
+      'fontName',  // 字体
+      'italic',  // 斜体
+      'underline',  // 下划线
+      'strikeThrough',  // 删除线
+      'foreColor',  // 文字颜色
+      'backColor',  // 背景颜色
+      'list',  // 列表
+      'justify',  // 对齐方式
+      'quote',  // 引用
+      'image',  // 插入图片
+      'undo',  // 撤销
+      'redo'  // 重复
+    ]
+    
+    // 过滤 word 字符
+    this.editor.config.pasteFilterStyle = false
+    this.editor.config.pasteTextHandle = function(content) {
+      const regs = [
+        /<!--\[if [\s\S]*?endif\]-->/ig,
+        /<[a-zA-Z0-9]+\:[^>]+>[^>]*<\/[a-zA-Z0-9]+\:[^>]+>/ig,
+        /<[a-zA-Z0-9]+\:[^>]+\/>/ig,
+        /<style>[\s\S]*?<\/style>/ig,
+        new RegExp('\u2029', 'ig'),     // 替换word分隔符 序号 8233
+      ]
+
+      return regs.reduce((acc, reg) => {
+        return acc.replace(reg, '')
+      }, content)
+    }
+
+    this.editor.create()
+    this.editor.$textElem.attr('contenteditable',this.state.contenteditable);
+    this.editor.config.uploadImgShowBase64 = true
+    this.editor.txt.html(this.props.value)
+  }
+
+  componentDidUpdate(props, state) {
+    if (this.props.value && !state.html) {
+      if (this.editor) {
+        this.editor.txt.html(this.props.value)
+      }
+    }
+  }
+
+  /**
+   *增加这个 shouldComponentUpdate 生命函数
+    处理自动聚焦到富文本上
+   *
+   * @param {*} nextProps
+   * @returns
+   * @memberof Wangedit
+   */
+  shouldComponentUpdate(nextProps) {
+    return nextProps.value !== this.editor.txt.html()
+  }
+}
+
+export default Wangedit
+

src/pages/UserManage/Editor/User.jsx

@@ -7,6 +7,7 @@ import XForm, { FieldTypes } from '../../../components/XForm';
 import { fetch, apis } from '../../../utils/request';
 import SelectCity from '../CitySelect';
 import ImageUpload from '../../../components/uploadImage/ImageUpload';
+import Wangedit from '@/components/Wangedit/Wangedit';
 
 
 const defaultPass = 'abc@123';
@@ -160,6 +161,20 @@ export default props => {
       ],
       value: user.orgNum,
     },
+
+    {
+      label: '公司封面',
+      name: 'orgThumb',
+      type: FieldTypes.ImageUploader,
+      value: user.orgThumb,
+    },
+
+    {
+      label: '公司简介',
+      name: 'orgDesc',
+      value: user.orgDesc,
+      render: <Wangedit />
+    },
   ]
 
   const handleSubmit = val => {
@@ -206,5 +221,10 @@ export default props => {
   }
 
   return (
-  <><Spin spinning={ submitting } size="large"><XForm onSubmit={handleSubmit} onCancel={handleCancel} fields={fields} submitting={submitting}></XForm></Spin></>)
+    <>
+      <Spin spinning={ submitting } size="large">
+        <XForm onSubmit={handleSubmit} onCancel={handleCancel} fields={fields} submitting={submitting}></XForm>
+      </Spin>
+    </>
+  )
 }

src/pages/UserManage/Editor/index.jsx

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import { PageHeaderWrapper } from '@ant-design/pro-layout';
-import { Radio, Button } from 'antd';
+import { Radio, Button, Spin } from 'antd';
 import { router } from 'umi';
 import User from './User';
 import MiniApp from './Miniapp';
@@ -66,12 +66,16 @@ export default (props) => {
           <Radio.Button value={4}>特殊配置</Radio.Button>
         </Radio.Group>
       </div>
-      <div style={{ width: '800px', margin: '0 auto' }}>
-        { tab === 1 ? <User data={user} {...props} onChange={handleChangeUser} onCancel={handleCancel(1)}/> : null}
-        { tab === 2 ? <MiniApp data={user} tplTyps={tplTyps} {...props} onChange={handleChangeUser} onCancel={handleCancel(2)}/> : null}
-        { tab === 3 ? <Menus data={user} {...props} onCancel={handleCancel(3)}/> : null}
-        { tab === 4 ? <Advanced data={user} {...props} onCancel={handleCancel(4)}/> : null}
-      </div>
+      {
+        user.userId && (
+          <div style={{ width: '800px', margin: '0 auto' }}>
+            { tab === 1 ? <User data={user} {...props} onChange={handleChangeUser} onCancel={handleCancel(1)}/> : null}
+            { tab === 2 ? <MiniApp data={user} tplTyps={tplTyps} {...props} onChange={handleChangeUser} onCancel={handleCancel(2)}/> : null}
+            { tab === 3 ? <Menus data={user} {...props} onCancel={handleCancel(3)}/> : null}
+            { tab === 4 ? <Advanced data={user} {...props} onCancel={handleCancel(4)}/> : null}
+          </div>
+        )
+      }
     </PageHeaderWrapper>
   );
 }