feats

package.json

@@ -72,7 +72,7 @@
     "umi-plugin-pro-block": "^1.3.6",
     "umi-plugin-react": "^1.15.8",
     "umi-request": "^1.0.8",
-    "wangeditor": "^3.1.1"
+    "wangeditor": "^4.6.2"
   },
   "devDependencies": {
     "@ant-design/colors": "^3.1.0",

src/components/Wangedit/Preview.jsx

@@ -0,0 +1,44 @@
+import React, { useEffect, useRef } from 'react'
+import { Modal } from 'antd'
+import PreviewMenu from './PreviewMenu'
+
+export default props => {
+  const ref = useRef()
+
+  useEffect(() => {
+    let t = null
+    if (props.visible) {
+      // 防止 postMessage 的时候 iframe 内容还没有加载完成
+      t = setInterval(() => {
+        console.log('----postMessage----->', ref.current)
+        // window.preViewFrame.window.postMessage(props.html, '*')
+        if (ref.current) {
+          ref.current.contentWindow.postMessage(props.html, '*')
+        }
+      }, 800)
+    }
+
+    return () => t && clearInterval(t)
+  }, [props.visible, props.html])
+
+  return (
+    <Modal
+      visible={props.visible}
+      wrapClassName="editor-preivew-modal-content"
+      width={props.width}
+      bodyStyle={props.style}
+      footer={null}
+      closable={false}
+      title={null}
+      onCancel={props.onCancel}
+      >
+      <iframe
+        ref={ref}
+        style={{width: '100%', height: '100%'}}
+        src={`${window.location.origin}/preview-html/index.html`}
+        frameBorder={0}
+        name="preViewFrame"
+      ></iframe>
+    </Modal>
+  )
+}

src/components/Wangedit/PreviewMenu.js

@@ -0,0 +1,27 @@
+import E from 'wangeditor'
+
+const { $, BtnMenu } = E
+
+class PreViewMenu extends BtnMenu {
+  constructor(editor) {
+    // data-title属性表示当鼠标悬停在该按钮上时提示该按钮的功能简述
+      const $elem = E.$(
+          `<div class="w-e-menu" data-title="预览">
+            <i>预览</i>
+          </div>`
+      )
+      super($elem, editor)
+      this.editor = editor
+      // <i class="w-e-icon-fullscreen"></i>
+  }
+
+  static preview() {}
+
+  clickHandler() {
+    PreViewMenu.preview(this.editor.txt.html())
+  }
+
+  tryChangeActive(){}
+}
+
+export default PreViewMenu

src/components/Wangedit/Wangedit.jsx

@@ -1,5 +1,7 @@
 import React from 'react';
 import E from 'wangeditor';
+import PreviewMenu from './PreviewMenu'
+import Preview from './Preview'
 import { fetch, apis } from '../../utils/request';
 
 /**
@@ -10,6 +12,7 @@ class Wangedit extends React.Component {
   constructor(props, context) {
     super(props, context);
     this.state = {
+      preview: false,
       html: undefined,
       contenteditable: props.contenteditable == false ? false : true
     }
@@ -18,8 +21,10 @@ class Wangedit extends React.Component {
 
   render() {
     return (
-      <div ref="editorElem" style={{ textAlign: 'left' }}>
-      </div>
+      <>
+        <div ref="editorElem" style={{ textAlign: 'left' }} />
+        <Preview width={426} style={{width: '426px', height: '863px', margin: 0, padding: 0}} visible={this.state.preview} html={this.state.html} onCancel={() => this.setState({preview: false})} />
+      </>
     );
   }
 
@@ -27,24 +32,31 @@ class Wangedit extends React.Component {
     const elem = this.refs.editorElem
     this.editor = new E(elem)
     // 使用 onchange 函数监听内容的变化
-    this.editor.customConfig.onchange = html => {
+    this.editor.config.onchange = html => {
       this.setState({ html })
 
       if (typeof this.props.onChange === 'function') {
         this.props.onChange(html)
       }
     }
-    this.editor.customConfig.zIndex = 100
-    this.editor.customConfig.uploadImgMaxLength = 1
-    this.editor.customConfig.customUploadImg = function (files, insert) {
+    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.menus.extend('previewMenu', PreviewMenu)
+    PreviewMenu.preview = (html) => {
+      this.setState({preview: true})
     }
-    this.editor.customConfig.menus = [
+
+    this.editor.config.menus = [
       'head',  // 标题
       'bold',  // 粗体
       'fontSize',  // 字号
@@ -59,12 +71,13 @@ class Wangedit extends React.Component {
       'quote',  // 引用
       'image',  // 插入图片
       'undo',  // 撤销
-      'redo'  // 重复
+      'redo',  // 重复
+      'previewMenu'
     ]
     
     // 过滤 word 字符
-    this.editor.customConfig.pasteFilterStyle = false
-    this.editor.customConfig.pasteTextHandle = function(content) {
+    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,
@@ -80,7 +93,7 @@ class Wangedit extends React.Component {
 
     this.editor.create()
     this.editor.$textElem.attr('contenteditable',this.state.contenteditable);
-    this.editor.customConfig.uploadImgShowBase64 = true
+    this.editor.config.uploadImgShowBase64 = true
     this.editor.txt.html(this.props.value)
   }
 
@@ -101,7 +114,7 @@ class Wangedit extends React.Component {
    * @memberof Wangedit
    */
   shouldComponentUpdate(nextProps) {
-    return nextProps.value !== this.editor.txt.html()
+    return nextProps.value !== this.editor.txt.html() || nextProps.preview !== this.state.preview
   }
 }
 

src/global.less

@@ -196,6 +196,15 @@ ol {
     border-top:none;
   }
 }
+
+.editor-preivew-modal-content {
+  .ant-modal-content {
+    background: transparent !important;
+    box-shadow: none;
+  }
+}
+
+
 :global {
   .ant-layout {
     min-height: 100vh;

src/pages/activity/SignList.jsx

@@ -68,6 +68,8 @@ const columns = [
 
 const header = props => {
   const [data, setData] = useState({ list: {} })
+  const [actInfo, setActInfo] = useState()
+
   //   const [page, changePage] = useState({})
   // 存入导入数据的值
   const { getFieldDecorator, getFieldsValue } = props.form
@@ -75,6 +77,11 @@ const header = props => {
   useEffect(() => {
     // eslint-disable-next-line no-use-before-define
     getSignList({ pageNum: 1, pageSize: 10, dynamicId: props.location.query.dynamicId });
+    //
+    
+    request({ ...apis.activity.details, params: { dynamicId: props.location.query.dynamicId } }).then(res => {
+      setActInfo(res)
+    })
   }, [])
 
   // 查询列表
@@ -117,11 +124,12 @@ const header = props => {
         if (!data) {
           return
         }
+
         const url = window.URL.createObjectURL(new Blob([data]))
         const link = document.createElement('a')
         link.style.display = 'none'
         link.href = url
-        link.setAttribute('download', '报名列表.xlsx')
+        link.setAttribute('download', `${actInfo.title || {}}-报名列表.xlsx`)
         document.body.append(link)
         link.click()
       }).catch(() => {

src/pages/integralMall/exchangeRecords.jsx

@@ -8,6 +8,7 @@ import BuildSelect from '../../components/SelectButton/BuildSelect'
 import apis from '../../services/apis';
 import request from '../../utils/request'
 import AuthButton from '@/components/AuthButton';
+import { exportExcel } from '@/utils/utils'
 
 /**
   @param {*} props
@@ -21,6 +22,7 @@ function record(props) {
 
   // 获取初始化数据
   const [data, setData] = useState({})
+  const [queryParam, setQueryParam] = useState()
 
   useEffect(() => {
     getList({ pageNum: 1, pageSize: 10 });
@@ -65,12 +67,20 @@ function record(props) {
           submitValue.endVerifyDate = null
         }
 
+        setQueryParam(submitValue)
+
         console.log(submitValue)
         getList({ pageNum: 1, pageSize: 10, ...submitValue })
       }
     });
   }
 
+  const handleExport = () => {
+    request({ ...apis.integralMall.taPointsExchangeExport, params: queryParam, }).then((data) => {
+      exportExcel(data, '积分兑换记录')
+    })
+  }
+
   const changePageNum = (pageNumber) => {
     props.form.validateFields((err, values) => {
       if (!err) {
@@ -92,7 +102,7 @@ function record(props) {
       dataIndex: 'personType',
       key: 'personType',
       align: 'center',
-      render: (personType) => <><span>{personType === 'Realty Consultant' ? '置业顾问' : personType === 'Sales Executive' ? '销售主管' : personType === 'estate agent' ? '经纪人' : personType === 'customer' ? '客户' : ''}</span></>
+      render: (personType) => <><span>{personType === 'prop' ? '物业相关' : personType === 'life-consultant' ? '生活管家' : ''}</span></>
     },
     {
       title: '手机号',
@@ -210,6 +220,9 @@ function record(props) {
         </div>
 
       </Form>
+      <div style={{marginTop: 24}}>
+        <Button onClick={handleExport}>导出</Button>
+      </div>
       <Table rowKey="exchangeRecords" style={{ marginTop: '40px' }} dataSource={data.records} columns={columns} pagination={false} />
       <div style={{ display: 'flex', justifyContent: 'flex-end', marginTop: '30px' }}>
         <Pagination showQuickJumper defaultCurrent={1} total={data.total} onChange={changePageNum} current={data.current} />

src/pages/property/bill/info/index.jsx

@@ -13,6 +13,7 @@ const BillStatusDict = [
   { value: '0', label: '未缴费' },
   { value: '1', label: '已线上缴费' },
   { value: '2', label: '已线下缴费' },
+  { value: '3', label: '支付中' },
 ]
 
 const PayTypeDict = [

src/services/apis.js

@@ -727,6 +727,11 @@ export default {
       method: 'GET',
       action: 'admin.taPointsExchange.get',
     },
+    taPointsExchangeExport: {
+      url: `${prefix}/taPointsExchange/export`,
+      method: 'GET',
+      action: 'admin.taPointsExchange.get',
+    },
     getTaGoods: {
       url: `${prefix}/taGoods`,
       method: 'GET',

src/utils/utils.js

@@ -25,3 +25,14 @@ export const getPageQuery = () => parse(window.location.href.split('?')[1]);
 export function ObjSpEqual(a = {}, b = {}) {
   return JSON.stringify(a) === JSON.stringify(b)
 }
+
+
+export function exportExcel(data, title) {  
+  const url = window.URL.createObjectURL(new Blob([data]))
+  const link = document.createElement('a')
+  link.style.display = 'none'
+  link.href = url
+  link.setAttribute('download', `${title}.xlsx`)
+  document.body.append(link)
+  link.click()
+}