1

src/components/DragableUploadImageList/Item.jsx

@@ -0,0 +1,46 @@
+import React from 'react'
+import { Icon } from 'antd'
+
+export default (props) => {
+    const { dataset = {}, onPreview, onDelete, onClick, onSticky } = props
+    const { url } = dataset
+
+    const handlePreview = () => {
+        onPreview && onPreview(dataset)
+    }
+
+    const handleDelete = () => {
+        onDelete && onDelete(dataset)
+    }
+
+    const handleClick = () => {
+        return onClick ? onClick(dataset) : null
+    }
+
+    const handleSticky = () => {
+        onSticky && onSticky(dataset)
+    }
+
+    return (
+        <div className="ant-upload-list-picture-card-container">
+            <span>
+                <div className="ant-upload-list-item ant-upload-list-item-done ant-upload-list-item-list-type-picture-card">
+                    <div className="ant-upload-list-item-info">
+                        <span>
+                            <a className="ant-upload-list-item-thumbnail" href={url} target="_blank" rel="noopener noreferrer" onClick={handleClick}>
+                                <img className="ant-upload-list-item-image" src={url} alt="image" />
+                            </a>
+                        </span>
+                    </div>
+
+                    <span className="ant-upload-list-item-actions">
+                        <Icon type="vertical-align-top" className="anticon anticon-eye-o" onClick={handleSticky} />
+                        <Icon type="eye" className="anticon anticon-eye-o" onClick={handlePreview} />
+                        <Icon type="delete" onClick={handleDelete} />
+                    </span>
+                </div>
+            </span>
+        </div>
+    )
+}
+

src/components/DragableUploadImageList/index.jsx

@@ -0,0 +1,115 @@
+import React from 'react';
+import { Upload, Icon, Modal } from 'antd';
+import './style.less';
+import { uploaderProps } from '../../utils/upload';
+import Item from './Item'
+
+/**
+ * unlimited  属性表示上传图片无限制
+ * 例子： <ImageListUpload unlimited/>
+ */
+class ImageListUpload extends React.Component {
+  state = {
+    previewVisible: false,
+    previewImage: '',
+    loadding: false,
+  };
+
+  getFileList = () => {
+    return (this.props.value || []).map((img, inx) => ({ uid: inx, url: img, status: 'done' }))
+  }
+
+  handleCancel = () => this.setState({ previewVisible: false });
+
+  handlePreview = async file => {
+    this.setState({
+      previewImage: file.url ,
+      previewVisible: true,
+    });
+  };
+
+  handleSticky = ({ url }) => {
+    const fileList = this.props.value || [];
+    this.props.onChange([url].concat(fileList.filter(x => x != url)))
+  }
+
+  handleDelete = ({ url }) => {
+    const fileList = this.props.value || [];
+    this.props.onChange(fileList.filter(x => x != url))
+  }
+
+  handleChange = (e) => {
+    if (e.file.status === "uploading") {
+      this.setState({ loading: true });
+      return;
+    }
+
+    const fileList = (this.props.value || []).filter(x => x != e.file.url);
+    this.props.onChange(fileList);
+
+    // console.log('删除图片触发了', e.file)
+    // if (e.file.state === 'removed') {
+    //   const fileList = (this.props.value || []).filter(x => x != e.file.url);
+    //   this.props.onChange(fileList);
+    // }
+
+    // if (e.file.status === "done") {
+    //   this.setState({
+    //     loading: false,
+    //   })
+
+    //   if (e.file.response && e.file.response.url) {
+    //     if (typeof this.props.onChange === 'function') {
+    //       const fileList = this.getFileList()
+    //       this.props.onChange([...fileList || [], e.file.response.url]);
+    //     }
+    //   }
+    // }
+  };
+
+  handleUploadSucess = (url) => {
+    this.setState({ loading: false });
+    if (typeof this.props.onChange === 'function') {
+      const fileList = this.props.value || [];
+      this.props.onChange([...fileList, url]);
+    }
+  }
+
+  render() {
+    const { previewVisible, previewImage } = this.state;
+    const { multiple = false } = this.props;
+    const fileList = this.getFileList();
+
+    const uploadButton = (
+      <div>
+        <Icon style={{ fontSize: '2em', color: '#aaa' }} type={this.state.loading ? "loading" : "plus"}  />
+      </div>
+    );
+    return (
+      <div className="clearfix x-dargable-image-upload-list">
+        <div className="ant-upload-list ant-upload-list-picture-card">
+            {fileList.map(img => <Item key={img.url} dataset={img} onPreview={this.handlePreview} onSticky={this.handleSticky} onDelete={this.handleDelete}/>)}
+        </div>
+          
+        <Upload
+          listType="picture-card"
+          showUploadList={false}
+          multiple={multiple}
+          onPreview={this.handlePreview}
+          onChange={this.handleChange}
+          { ...uploaderProps }
+          onSuccess={this.handleUploadSucess}
+        >
+        
+          {/* unlimited 表示上传无限制数量 */}
+          {(this.props.unlimited && uploadButton) || ((fileList || images).length >= 8 ? null : uploadButton)}
+        </Upload>
+        <Modal visible={previewVisible} footer={null} onCancel={this.handleCancel}>
+          <img alt="example" style={{ width: '100%' }} src={previewImage} />
+        </Modal>
+      </div>
+    );
+  }
+}
+
+export default ImageListUpload;

src/components/DragableUploadImageList/style.less

@@ -0,0 +1,23 @@
+:global {
+  .x-dargable-image-upload-list {
+    display: flex;
+  }
+
+  
+  .x-dargable-image-upload-list  .ant-upload-picture-card-wrapper {
+    width: auto !important;
+  }
+
+}
+
+
+/* you can make up upload button and sample style by using stylesheets */
+.ant-upload-select-picture-card i {
+  font-size: 32px;
+  color: #999;
+}
+
+.ant-upload-select-picture-card .ant-upload-text {
+  margin-top: 8px;
+  color: #666;
+}

src/components/EchartsTest/EChart.jsx

@@ -0,0 +1,64 @@
+import React, { Component } from 'react';
+
+// 引入 ECharts 主模块
+import echarts from 'echarts/lib/echarts';
+// 引入柱状图
+import 'echarts/lib/chart/bar';
+import 'echarts/lib/chart/pie';
+import 'echarts/lib/chart/scatter';
+import 'echarts/lib/chart/effectScatter';
+import 'echarts/lib/chart/map';
+// 引入提示框和标题组件
+import 'echarts/lib/component/tooltip';
+import 'echarts/lib/component/legend';
+import 'echarts/lib/component/title';
+import 'echarts/lib/chart/line';
+import 'echarts/lib/component/dataZoom';
+import 'echarts/lib/component/geo';
+import 'echarts/lib/component/visualMap';
+
+import { ChinaData } from './china';
+
+echarts.registerMap('china', ChinaData);
+
+class EchartsTest extends Component {
+    chartRef = React.createRef();
+    chart = undefined
+    defaultChartOption = {}
+
+    componentDidMount () {
+        this.chart = echarts.init(this.chartRef.current)
+
+        // 绘制图表
+        this.chart.setOption({
+            ...this.defaultChartOption,
+            ...this.props.options || {},
+        });
+    }
+
+    componentDidUpdate (preProps) {
+        if (preProps.options != this.props.options) {
+            const options = {
+                ...this.defaultChartOption,
+                ...this.props.options || {},
+            }
+
+
+            this.chart.setOption(options);
+        }
+    }
+
+    render () {
+        const style = {
+            width: '600px',
+            height: '400px',
+            ...this.props.style || {}
+        }
+
+        return (
+            <div onClick={this.props.onClick} ref={this.chartRef} style={style}></div>
+        );
+    }
+}
+
+export default EchartsTest;

src/components/EchartsTest/Line.jsx

@@ -0,0 +1,37 @@
+import React, { useEffect } from 'react';
+import EChart from './EChart';
+
+
+const Line = (props) => {
+
+  const {person_realty_consultant, person_estate_agent, person_null} = xxx
+
+  const options = {
+    xAxis: {},
+    legend: {
+      left: '70%',
+      data: ['来源置业顾问', '来源全民经纪人', '自主进入'],
+    },
+    series: [
+      {
+        type: 'pie',
+        datasetIndex: 1,
+        center: ['75%', '50%'],
+        radius: [0, '50%'],
+      },
+    ],
+    dataset: {
+      id: 'pie',
+      source: [
+        { form: '来源置业顾问', value: person_realty_consultant },
+        { form: '来源全民经纪人', value: person_estate_agent },
+        { form: '自主进入', value: person_null },
+      ]
+    },
+  }
+
+  return (
+    <EChart options={options} />
+  )
+
+}

src/components/EchartsTest/index.jsx

@@ -0,0 +1,19 @@
+import React, { Component } from 'react';
+
+// 引入 ECharts 主模块
+import echarts from 'echarts/lib/echarts';
+// 引入柱状图
+import 'echarts/lib/chart/bar';
+// 引入提示框和标题组件
+import 'echarts/lib/component/tooltip';
+import 'echarts/lib/component/title';
+import 'echarts/lib/chart/line'
+
+class Chart extends Component {
+
+  render() {
+    return (<div></div>);
+  }
+}
+
+export default Chart;

src/components/EditIcon/index.jsx

@@ -0,0 +1,115 @@
+import React, { useMemo } from 'react';
+import spriteImg from '../../assets/sprite.png';
+
+const spriteInfo = [
+    {
+        name: '启用',
+        type: 'start',
+        pos: 0,
+        color: '#ff925c',
+    },
+    {
+        name: '发布',
+        type: 'publish',
+        pos: -126,
+        color: '#ff925c',
+    },
+    {
+        name: '上架',
+        type: 'up',
+        pos: -18,
+        color: '#ff925c',
+    },
+    {
+        name: '编辑',
+        type: 'edit',
+        pos: -144,
+        color: '#ff925c',
+    },
+    {
+        name: '取消',
+        type: 'cancel',
+        pos: -36,
+        color: '#FF4A4A',
+    },
+    {
+        name: '停用',
+        type: 'stop',
+        pos: -162,
+        color: '#FF4A4A',
+    },
+    {
+        name: '结束',
+        type: 'end',
+        pos: -54,
+        color: '#FF4A4A',
+    },
+    {
+        name: '删除',
+        type: 'delete',
+        pos: -180,
+        color: '#FF4A4A',
+    },
+    {
+        name: '查看',
+        type: 'look',
+        pos: -72,
+        color: '#FF4A4A',
+    },
+    {
+        name: '添加',
+        type: 'add',
+        pos: -198,
+        color: '#FF4A4A',
+    },
+    {
+        name: '前置',
+        type: 'top',
+        pos: -90,
+        color: '#FF4A4A',
+    },
+    {
+        name: '下架',
+        type: 'down',
+        pos: -216,
+        color: '#FF4A4A',
+    },
+    {
+        name: '记录',
+        type: 'record',
+        pos: -108,
+        color: '#FF4A4A',
+    },
+    {
+        name: '数据',
+        type: 'data',
+        pos: -234,
+        color: '#FF4A4A',
+    },
+    {
+        name: '下载二维码',
+        type: 'download',
+        pos: -252,
+        color: '#ff925c',
+    },
+]
+
+function noop() { }
+
+const EditIcon = ({ text, type, color, position, onClick }) => {
+    const icon = spriteInfo.filter(x => x.type === type)[0] || {};
+    const color2 = color || icon.color || '#ff925c';
+    const position2 = position || icon.pos;
+
+    const wrappedStyle = useMemo(() => ({ color: `${color2}`, display: 'flex', alignItems: 'center', cursor: 'pointer' }), [type, color]);
+    const iconStyle = useMemo(() => ({ display: 'inline-block', marginLeft: '6px', background: `url(${spriteImg}) 0 ${position2}px / 100% 1500% no-repeat`, width: '18px', height: '18px' }), [type, position])
+
+    return (
+        <span style={wrappedStyle} onClick={onClick || noop} >
+            {text}
+            {type && <span style={iconStyle}></span>}
+        </span>
+    )
+};
+
+export default EditIcon;

src/components/GlobalHeader/AvatarDropdown.jsx

@@ -0,0 +1,111 @@
+import { Avatar, Icon, Menu, Spin } from 'antd';
+import { FormattedMessage } from 'umi-plugin-react/locale';
+import React from 'react';
+import { connect } from 'dva';
+import router from 'umi/router';
+import HeaderDropdown from '../HeaderDropdown';
+import styles from './index.less';
+import ShowPassword from './ShowPassword'
+
+class AvatarDropdown extends React.Component {
+
+  constructor(props) {
+    super()
+    this.state = { visible: false }
+  }
+
+  onMenuClick = event => {
+    const { key } = event;
+
+    if (key === 'logout') {
+      const { dispatch } = this.props;
+
+      if (dispatch) {
+        dispatch({
+          type: 'login/logout',
+        });
+      }
+
+      return;
+    }
+
+    if (key === 'updatePassword') {
+      this.setState({ visible: true })
+      return;
+    }
+
+    router.push(`/account/${key}`);
+  };
+
+  onCancel = (e) => {
+    this.setState({ visible: false })
+  }
+
+  render() {
+    console.log(this.props, 'props')
+    const {
+      currentUser = {
+        avatar: '',
+        userName: '',
+        miniAppName: '',
+      },
+      menu,
+    } = this.props;
+    const menuHeaderDropdown = (
+      <Menu className={styles.menu} selectedKeys={[]} onClick={this.onMenuClick}>
+        {menu && (
+          <Menu.Item key="center">
+            <Icon type="user" />
+            <FormattedMessage id="menu.account.center" defaultMessage="account center" />
+          </Menu.Item>
+        )}
+        {menu && (
+          <Menu.Item key="settings">
+            <Icon type="setting" />
+            <FormattedMessage id="menu.account.settings" defaultMessage="account settings" />
+          </Menu.Item>
+        )}
+        {menu && <Menu.Divider />}
+
+        <Menu.Item key="updatePassword">
+          <Icon type="key" />
+          <FormattedMessage id="menu.account.updatePassword" defaultMessage="updatePassword" />
+        </Menu.Item>
+        <Menu.Item key="logout">
+          <Icon type="logout" />
+          <FormattedMessage id="menu.account.logout" defaultMessage="logout" />
+        </Menu.Item>
+      </Menu>
+    );
+    return currentUser && currentUser.userName ? (
+      <>
+        <HeaderDropdown overlay={menuHeaderDropdown}>
+            <div className={`${styles.action} ${styles.account}`} style={{display:'flex'}}>
+              
+         <div style={{margin:'10px 0' }}>
+              <p align="right" className={styles.name}>{currentUser.loginName}</p>
+     
+              <p align="right" className={styles.name}>欢迎登录{currentUser.miniAppName}</p>
+          </div>
+          <Avatar size="small" className={styles.avatar} src={currentUser.avatar === null ? currentUser.photo:currentUser.avatar} alt="avatar" />
+            </div>
+        </HeaderDropdown>
+
+        {/* 修改密码 */}
+       <ShowPassword visible={this.state.visible} onCancel={(e) => this.onCancel(e)} />
+      </>
+    ) : (
+      <Spin
+        size="small"
+        style={{
+          marginLeft: 8,
+          marginRight: 8,
+        }}
+      />
+    );
+  }
+}
+
+export default connect(({ user }) => ({
+  currentUser: user.currentUser,
+}))(AvatarDropdown);

src/components/GlobalHeader/NoticeIconView.jsx

@@ -0,0 +1,174 @@
+import React, { Component } from 'react';
+import { Tag, message } from 'antd';
+import { connect } from 'dva';
+import { formatMessage } from 'umi-plugin-react/locale';
+import groupBy from 'lodash/groupBy';
+import moment from 'moment';
+import NoticeIcon from '../NoticeIcon';
+import styles from './index.less';
+
+class GlobalHeaderRight extends Component {
+  componentDidMount() {
+    const { dispatch } = this.props;
+
+    if (dispatch) {
+      dispatch({
+        type: 'global/fetchNotices',
+      });
+    }
+  }
+
+  changeReadState = clickedItem => {
+    const { id } = clickedItem;
+    const { dispatch } = this.props;
+
+    if (dispatch) {
+      dispatch({
+        type: 'global/changeNoticeReadState',
+        payload: id,
+      });
+    }
+  };
+  handleNoticeClear = (title, key) => {
+    const { dispatch } = this.props;
+    message.success(
+      `${formatMessage({
+        id: 'component.noticeIcon.cleared',
+      })} ${title}`,
+    );
+
+    if (dispatch) {
+      dispatch({
+        type: 'global/clearNotices',
+        payload: key,
+      });
+    }
+  };
+  getNoticeData = () => {
+    const { notices = [] } = this.props;
+
+    if (notices.length === 0) {
+      return {};
+    }
+
+    const newNotices = notices.map(notice => {
+      const newNotice = { ...notice };
+
+      if (newNotice.datetime) {
+        newNotice.datetime = moment(notice.datetime).fromNow();
+      }
+
+      if (newNotice.id) {
+        newNotice.key = newNotice.id;
+      }
+
+      if (newNotice.extra && newNotice.status) {
+        const color = {
+          todo: '',
+          processing: 'blue',
+          urgent: 'red',
+          doing: 'gold',
+        }[newNotice.status];
+        newNotice.extra = (
+          <Tag
+            color={color}
+            style={{
+              marginRight: 0,
+            }}
+          >
+            {newNotice.extra}
+          </Tag>
+        );
+      }
+
+      return newNotice;
+    });
+    return groupBy(newNotices, 'type');
+  };
+  getUnreadData = noticeData => {
+    const unreadMsg = {};    
+    Object.keys(noticeData).forEach(key => {
+      const value = noticeData[key];
+
+      if (!unreadMsg[key]) {
+        unreadMsg[key] = 0;
+      }
+
+      if (Array.isArray(value)) {
+        unreadMsg[key] = value.filter(item => !item.read).length;
+      }
+    });
+    return unreadMsg;
+  };
+
+  render() {
+    const { currentUser, fetchingNotices, onNoticeVisibleChange } = this.props;
+    const noticeData = this.getNoticeData();
+    const unreadMsg = this.getUnreadData(noticeData);
+    return (
+      <NoticeIcon
+        className={styles.action}
+        count={currentUser && currentUser.unreadCount}
+        onItemClick={item => {
+          this.changeReadState(item);
+        }}
+        loading={fetchingNotices}
+        clearText={formatMessage({
+          id: 'component.noticeIcon.clear',
+        })}
+        viewMoreText={formatMessage({
+          id: 'component.noticeIcon.view-more',
+        })}
+        onClear={this.handleNoticeClear}
+        onPopupVisibleChange={onNoticeVisibleChange}
+        onViewMore={() => message.info('Click on view more')}
+        clearClose
+      >
+        <NoticeIcon.Tab
+          tabKey="notification"
+          count={unreadMsg.notification}
+          list={noticeData.notification}
+          title={formatMessage({
+            id: 'component.globalHeader.notification',
+          })}
+          emptyText={formatMessage({
+            id: 'component.globalHeader.notification.empty',
+          })}
+          showViewMore
+        />
+        <NoticeIcon.Tab
+          tabKey="message"
+          count={unreadMsg.message}
+          list={noticeData.message}
+          title={formatMessage({
+            id: 'component.globalHeader.message',
+          })}
+          emptyText={formatMessage({
+            id: 'component.globalHeader.message.empty',
+          })}
+          showViewMore
+        />
+        <NoticeIcon.Tab
+          tabKey="event"
+          title={formatMessage({
+            id: 'component.globalHeader.event',
+          })}
+          emptyText={formatMessage({
+            id: 'component.globalHeader.event.empty',
+          })}
+          count={unreadMsg.event}
+          list={noticeData.event}
+          showViewMore
+        />
+      </NoticeIcon>
+    );
+  }
+}
+
+export default connect(({ user, global, loading }) => ({
+  currentUser: user.currentUser,
+  collapsed: global.collapsed,
+  fetchingMoreNotices: loading.effects['global/fetchMoreNotices'],
+  fetchingNotices: loading.effects['global/fetchNotices'],
+  notices: global.notices,
+}))(GlobalHeaderRight);

src/components/GlobalHeader/RightContent.jsx

@@ -0,0 +1,29 @@
+import { Icon, Tooltip } from 'antd';
+import React from 'react';
+import { connect } from 'dva';
+import { formatMessage } from 'umi-plugin-react/locale';
+import Avatar from './AvatarDropdown';
+import HeaderSearch from '../HeaderSearch';
+import SelectLang from '../SelectLang';
+import styles from './index.less';
+
+const GlobalHeaderRight = props => {
+  const { theme, layout } = props;
+  let className = styles.right;
+
+  if (theme === 'dark' && layout === 'topmenu') {
+    className = `${styles.right}  ${styles.dark}`;
+  }
+
+  return (
+    <div className={className}>
+
+      <Avatar />
+    </div>
+  );
+};
+
+export default connect(({ settings }) => ({
+  theme: settings.navTheme,
+  layout: settings.layout,
+}))(GlobalHeaderRight);

src/components/GlobalHeader/ShowPassword.jsx

@@ -0,0 +1,126 @@
+import React, { Component } from 'react'
+import { Modal, Button, Form, Input, Icon, notification } from 'antd'
+import request from '../../utils/request'
+import apis from '../../services/apis'
+
+
+function passwodForm(props) {
+
+
+  const openNotificationWithIcon = (type, message) => {
+    notification[type]({
+      message,
+      description:
+        '',
+    });
+  }
+
+  function handleSubmit(e) {
+    e.preventDefault();
+    props.form.validateFieldsAndScroll((err, values) => {
+      // 两次密码比较
+      if (values.newPassword !== values.newPasswordToo) {
+        openNotificationWithIcon('error', '两次密码输入不一样,请重新输入')
+        return
+      }
+      if (!err) {
+        request({ ...apis.user.updatePassword, params: { ...values } }).then(() => {
+          openNotificationWithIcon('success', '操作成功!')
+          props.form.resetFields()
+          props.onSuccess()
+        }).catch(error => {
+          // openNotificationWithIcon('error', error.message)
+        })
+      }
+    });
+  }
+
+  const { getFieldDecorator } = props.form
+  return (
+    <>
+      <Form labelCol={{ span: 7 }} wrapperCol={{ span: 12 }} onSubmit={(e) => handleSubmit(e)}>
+      <Form.Item label="请输入旧密码">
+            {getFieldDecorator('originalPassword', {
+              rules: [{ required: true, message: '请输入旧密码' }],
+            })(
+              <Input
+                prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />}
+                type="password"
+                placeholder="Password"
+              />,
+            )}
+          </Form.Item>
+        <Form.Item label="新密码">
+            {getFieldDecorator('newPassword', {
+              rules: [{ required: true, message: '请输入新密码' }],
+            })(
+              <Input
+                prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />}
+                type="password"
+                placeholder="Password"
+              />,
+            )}
+          </Form.Item>
+          <Form.Item label="确认新密码">
+            {getFieldDecorator('newPasswordToo', {
+              rules: [{ required: true, message: '请确认新密码' }],
+            })(
+              <Input
+                prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />}
+                type="password"
+                placeholder="Password"
+              />,
+            )}
+          </Form.Item>
+          <Form.Item>
+            <Button type="primary" htmlType="submit">
+                确定
+            </Button>
+          </Form.Item>
+      </Form>
+    </>
+  )
+}
+
+const WrappedShowPasswordForm = Form.create({ name: 'passwodForm' })(passwodForm)
+
+export default class ShowPassword extends Component {
+
+  constructor(props) {
+    super(props)
+    this.state = { visible: false }
+  }
+
+  componentDidUpdate(prevProps) {
+    // 典型用法（不要忘记比较 props）：
+    console.log('接收值: ', this.props.visible, prevProps.visible)
+    if (this.props.visible !== prevProps.visible) {
+      // eslint-disable-next-line react/no-did-update-set-state
+      this.setState({ visible: this.props.visible })
+    }
+  }
+
+  handleOk = e => {
+    console.log('关闭了')
+    this.props.onCancel()
+  };
+
+  handleCancel = e => {
+    console.log('关闭了')
+    this.props.onCancel()
+  };
+
+  render() {
+    return (
+      <>
+        <Modal
+          title="修改密码"
+          visible={this.state.visible}
+          onCancel={this.handleCancel}
+          footer={null}>
+          <WrappedShowPasswordForm onSuccess={(e) => this.handleCancel(e)} />
+        </Modal>
+      </>
+    );
+  }
+}

src/components/GlobalHeader/index.less

@@ -0,0 +1,147 @@
+@import '~antd/es/style/themes/default.less';
+
+@pro-header-hover-bg: rgba(0, 0, 0, 0.025);
+.name {
+
+  color: #fff;
+  padding: 0;
+  margin: 0;
+  height: 20px;
+  line-height: 20px;
+    
+}
+.logo {
+  display: inline-block;
+  height: @layout-header-height;
+  padding: 0 0 0 24px;
+  font-size: 20px;
+  line-height: @layout-header-height;
+  vertical-align: top;
+  cursor: pointer;
+  img {
+    display: inline-block;
+    vertical-align: middle;
+  }
+}
+
+.menu {
+  :global(.anticon) {
+    margin-right: 8px;
+  }
+  :global(.ant-dropdown-menu-item) {
+    min-width: 160px;
+  }
+}
+
+.trigger {
+  height: @layout-header-height;
+  padding: ~'calc((@{layout-header-height} - 20px) / 2)' 24px;
+  font-size: 20px;
+  cursor: pointer;
+  transition: all 0.3s, padding 0s;
+  &:hover {
+    background: @pro-header-hover-bg;
+  }
+}
+
+.right {
+  float: right;
+  height: 100%;
+  overflow: hidden;
+  .action {
+    display: inline-block;
+    height: 100%;
+    padding: 0 40px;
+    cursor: pointer;
+    transition: all 0.3s;
+    > i {
+      color: @text-color;
+      vertical-align: middle;
+    }
+    &:hover {
+      background: @pro-header-hover-bg;
+    }
+    &:global(.opened) {
+      background: @pro-header-hover-bg;
+    }
+  }
+  .search {
+    padding: 0 12px;
+    &:hover {
+      background: transparent;
+    }
+  }
+  .account {
+    .avatar {
+      width: 44px;
+      height: 44px;
+      margin: ~'calc((@{layout-header-height} - 44px) / 2)' 0;
+      margin-left: 20px;
+      color: @primary-color;
+      vertical-align: top;
+      background: rgba(255, 255, 255, 0.85);
+    }
+  }
+}
+
+.dark {
+  height: @layout-header-height;
+  .action {
+    color: rgba(255, 255, 255, 0.85);
+    > i {
+      color: rgba(255, 255, 255, 0.85);
+    }
+    &:hover,
+    &:global(.opened) {
+      background: @primary-color;
+    }
+    :global(.ant-badge) {
+      color: rgba(255, 255, 255, 0.85);
+    }
+  }
+}
+
+:global(.ant-pro-global-header) {
+  .dark {
+    .action {
+      color: @text-color;
+      > i {
+        color: @text-color;
+      }
+      &:hover {
+        color: rgba(255, 255, 255, 0.85);
+        > i {
+          color: rgba(255, 255, 255, 0.85);
+        }
+      }
+    }
+  }
+}
+
+@media only screen and (max-width: @screen-md) {
+  :global(.ant-divider-vertical) {
+    vertical-align: unset;
+  }
+  .name {
+    display: none;
+    color: #fff;
+  }
+  i.trigger {
+    padding: 22px 12px;
+  }
+  .logo {
+    position: relative;
+    padding-right: 12px;
+    padding-left: 12px;
+  }
+  .right {
+    position: absolute;
+    top: 0;
+    right: 12px;
+    .account {
+      .avatar {
+        margin-right: 0;
+      }
+    }
+  }
+}

src/components/HeaderDropdown/index.jsx

@@ -0,0 +1,10 @@
+import { Dropdown } from 'antd';
+import React from 'react';
+import classNames from 'classnames';
+import styles from './index.less';
+
+const HeaderDropdown = ({ overlayClassName: cls, ...restProps }) => (
+  <Dropdown overlayClassName={classNames(styles.container, cls)} {...restProps} />
+);
+
+export default HeaderDropdown;

src/components/HeaderDropdown/index.less

@@ -0,0 +1,16 @@
+@import '~antd/es/style/themes/default.less';
+
+.container > * {
+  background-color: #fff;
+  border-radius: 4px;
+  box-shadow: @shadow-1-down;
+}
+
+@media screen and (max-width: @screen-xs) {
+  .container {
+    width: 100% !important;
+  }
+  .container > * {
+    border-radius: 0 !important;
+  }
+}

src/components/HeaderSearch/index.jsx

@@ -0,0 +1,132 @@
+import { AutoComplete, Icon, Input } from 'antd';
+import React, { Component } from 'react';
+import classNames from 'classnames';
+import debounce from 'lodash/debounce';
+import styles from './index.less';
+export default class HeaderSearch extends Component {
+  static defaultProps = {
+    defaultActiveFirstOption: false,
+    onPressEnter: () => {},
+    onSearch: () => {},
+    onChange: () => {},
+    className: '',
+    placeholder: '',
+    dataSource: [],
+    defaultOpen: false,
+    onVisibleChange: () => {},
+  };
+
+  static getDerivedStateFromProps(props) {
+    if ('open' in props) {
+      return {
+        searchMode: props.open,
+      };
+    }
+
+    return null;
+  }
+
+  inputRef = null;
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      searchMode: props.defaultOpen,
+      value: '',
+    };
+    this.debouncePressEnter = debounce(this.debouncePressEnter, 500, {
+      leading: true,
+      trailing: false,
+    });
+  }
+
+  onKeyDown = e => {
+    if (e.key === 'Enter') {
+      this.debouncePressEnter();
+    }
+  };
+  onChange = value => {
+    if (typeof value === 'string') {
+      const { onSearch, onChange } = this.props;
+      this.setState({
+        value,
+      });
+
+      if (onSearch) {
+        onSearch(value);
+      }
+
+      if (onChange) {
+        onChange(value);
+      }
+    }
+  };
+  enterSearchMode = () => {
+    const { onVisibleChange } = this.props;
+    onVisibleChange(true);
+    this.setState(
+      {
+        searchMode: true,
+      },
+      () => {
+        const { searchMode } = this.state;
+
+        if (searchMode && this.inputRef) {
+          this.inputRef.focus();
+        }
+      },
+    );
+  };
+  leaveSearchMode = () => {
+    this.setState({
+      searchMode: false,
+      value: '',
+    });
+  };
+  debouncePressEnter = () => {
+    const { onPressEnter } = this.props;
+    const { value } = this.state;
+    onPressEnter(value);
+  };
+
+  render() {
+    const { className, placeholder, open, ...restProps } = this.props;
+    const { searchMode, value } = this.state;
+    delete restProps.defaultOpen; // for rc-select not affected
+
+    const inputClass = classNames(styles.input, {
+      [styles.show]: searchMode,
+    });
+    return (
+      <span
+        className={classNames(className, styles.headerSearch)}
+        onClick={this.enterSearchMode}
+        onTransitionEnd={({ propertyName }) => {
+          if (propertyName === 'width' && !searchMode) {
+            const { onVisibleChange } = this.props;
+            onVisibleChange(searchMode);
+          }
+        }}
+      >
+        <Icon type="search" key="Icon" />
+        <AutoComplete
+          key="AutoComplete"
+          {...restProps}
+          className={inputClass}
+          value={value}
+          onChange={this.onChange}
+        >
+          <Input
+            ref={node => {
+              this.inputRef = node;
+            }}
+            aria-label={placeholder}
+            placeholder={placeholder}
+            onKeyDown={this.onKeyDown}
+            onBlur={this.leaveSearchMode}
+          />
+        </AutoComplete>
+      </span>
+    );
+  }
+}

src/components/HeaderSearch/index.less

@@ -0,0 +1,32 @@
+@import '~antd/es/style/themes/default.less';
+
+.headerSearch {
+  :global(.anticon-search) {
+    font-size: 16px;
+    cursor: pointer;
+  }
+  .input {
+    width: 0;
+    background: transparent;
+    border-radius: 0;
+    transition: width 0.3s, margin-left 0.3s;
+    :global(.ant-select-selection) {
+      background: transparent;
+    }
+    input {
+      padding-right: 0;
+      padding-left: 0;
+      border: 0;
+      box-shadow: none !important;
+    }
+    &,
+    &:hover,
+    &:focus {
+      border-bottom: 1px solid @border-color-base;
+    }
+    &.show {
+      width: 210px;
+      margin-left: 8px;
+    }
+  }
+}

src/components/HouseSelect/ApartmentSelect.jsx

@@ -0,0 +1,64 @@
+import React, { useState, useEffect, useRef } from 'react';
+import { Select } from 'antd';
+import apis from '../../services/apis';
+import request from '../../utils/request'
+
+const { Option } = Select;
+
+function usePrevious(props) {
+  const ref = useRef();
+  useEffect(() => {
+    ref.current = props;
+  });
+  return ref.current;
+}
+
+/**
+ *
+ *
+ * @param {*} props
+ * @returns
+ */
+const ApartmentSelect = props => {
+  const [data, setData] = useState([])
+  const [value, setValue] = useState([])
+  useEffect(() => {
+    getList();
+  }, [props.value])
+
+
+  const getList = e => {
+    request({ ...apis.house.apartmentList, params: { pageNum: 1, pageSize: 999, buildingId: props.buildingId} }).then(data => {
+        setData(data.records)
+        checkValue(data.records)
+        // 默认选中第一个
+    })
+  }
+
+
+  const checkValue = (data) => {
+    if (props.value) {
+      const tempData = data.filter(f => f.apartmentId == props.value)
+      const va = (tempData.length > 0) ? props.value : '已删除，请重新选择'
+      props.onChange(va)
+
+    }
+  }
+
+  return (
+      <Select
+      showSearch
+      value={props.value}
+      style={{ width: '300px' }}
+      placeholder="请选择户型"
+      onChange={props.onChange}
+      filterOption={(input, option) =>
+        option.props.children && option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
+      }>
+          {data.map(apartment => (
+            <Option key={apartment.apartmentId} value={apartment.apartmentId}>{apartment.apartmentName}</Option>
+          ))}
+      </Select>
+  )
+}
+export default ApartmentSelect

src/components/HouseSelect/BlockSelect.jsx

@@ -0,0 +1,64 @@
+import React, { useState, useEffect, useRef } from 'react';
+import { Select } from 'antd';
+import apis from '../../services/apis';
+import request from '../../utils/request'
+
+const { Option } = Select;
+
+function usePrevious(props) {
+  const ref = useRef();
+  useEffect(() => {
+    ref.current = props;
+  });
+  return ref.current;
+}
+
+/**
+ *
+ *
+ * @param {*} props
+ * @returns
+ */
+const BlockSelect = props => {
+  const [data, setData] = useState([])
+  const [value, setValue] = useState([])
+  useEffect(() => {
+    getList();
+  }, [props.value])
+
+
+  const getList = e => {
+    request({ ...apis.house.block, params: { pageNum: 1, pageSize: 999, buildingId: props.buildingId} }).then(data => {
+        setData(data.records)
+        checkValue(data.records)
+        // 默认选中第一个
+    })
+  }
+
+
+  const checkValue = (data) => {
+    if (props.value) {
+      const tempData = data.filter(f => f.buildingId == props.value)
+      const va = (tempData.length > 0) ? props.value : '已删除，请重新选择'
+      props.onChange(va)
+
+    }
+  }
+
+  return (
+      <Select
+      showSearch
+      value={props.value}
+      style={{ width: '300px' }}
+      placeholder="请选择楼栋"
+      onChange={props.onChange}
+      filterOption={(input, option) =>
+        option.props.children && option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
+      }>
+          {data.map(block => (
+            <Option key={block.blockId} value={block.blockId}>{block.blockName}</Option>
+          ))}
+      </Select>
+  )
+}
+export default BlockSelect

src/components/HouseSelect/FloorSelect.jsx

@@ -0,0 +1,64 @@
+import React, { useState, useEffect, useRef } from 'react';
+import { Select } from 'antd';
+import apis from '../../services/apis';
+import request from '../../utils/request'
+
+const { Option } = Select;
+
+function usePrevious(props) {
+  const ref = useRef();
+  useEffect(() => {
+    ref.current = props;
+  });
+  return ref.current;
+}
+
+/**
+ *
+ *
+ * @param {*} props
+ * @returns
+ */
+const FloorSelect = props => {
+  const [data, setData] = useState([])
+  const [value, setValue] = useState([])
+  useEffect(() => {
+    getList();
+  }, [props.value])
+
+
+  const getList = e => {
+    request({ ...apis.house.floor, params: { pageNum: 1, pageSize: 999, buildingId: props.buildingId, blockId: props.blockId, unitId: props.unitId} }).then(data => {
+        setData(data.records)
+        checkValue(data.records)
+        // 默认选中第一个
+    })
+  }
+
+
+  const checkValue = (data) => {
+    if (props.value) {
+      const tempData = data.filter(f => f.buildingId == props.value)
+      const va = (tempData.length > 0) ? props.value : '已删除，请重新选择'
+      props.onChange(va)
+
+    }
+  }
+
+  return (
+      <Select
+      showSearch
+      value={props.value}
+      style={{ width: '300px' }}
+      placeholder="请选择楼层"
+      onChange={props.onChange}
+      filterOption={(input, option) =>
+        option.props.children && option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
+      }>
+          {data.map(floor => (
+            <Option key={floor.floorId} value={floor.floorId}>{floor.floorName}</Option>
+          ))}
+      </Select>
+  )
+}
+export default FloorSelect

src/components/HouseSelect/RoomSelect.jsx

@@ -0,0 +1,64 @@
+import React, { useState, useEffect, useRef } from 'react';
+import { Select } from 'antd';
+import apis from '../../services/apis';
+import request from '../../utils/request'
+
+const { Option } = Select;
+
+function usePrevious(props) {
+  const ref = useRef();
+  useEffect(() => {
+    ref.current = props;
+  });
+  return ref.current;
+}
+
+/**
+ *
+ *
+ * @param {*} props
+ * @returns
+ */
+const RoomSelect = props => {
+  const [data, setData] = useState([])
+  const [value, setValue] = useState([])
+  useEffect(() => {
+    getList();
+  }, [props.value])
+
+
+  const getList = e => {
+    request({ ...apis.house.room, params: { pageNum: 1, pageSize: 999, buildingId: props.buildingId, blockId: props.blockId, unitId: props.unitId, floorId: props.floorId} }).then(data => {
+        setData(data.records)
+        checkValue(data.records)
+        // 默认选中第一个
+    })
+  }
+
+
+  const checkValue = (data) => {
+    if (props.value) {
+      const tempData = data.filter(f => f.buildingId == props.value)
+      const va = (tempData.length > 0) ? props.value : '已删除，请重新选择'
+      props.onChange(va)
+
+    }
+  }
+
+  return (
+      <Select
+      showSearch
+      value={props.value}
+      style={{ width: '300px' }}
+      placeholder="请选择房号"
+      onChange={props.onChange}
+      filterOption={(input, option) =>
+        option.props.children && option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
+      }>
+          {data.map(room => (
+            <Option key={room.roomId} value={room.roomId}>{room.roomName}</Option>
+          ))}
+      </Select>
+  )
+}
+export default RoomSelect

src/components/HouseSelect/SalesBatchSelect.jsx

@@ -0,0 +1,64 @@
+import React, { useState, useEffect, useRef } from 'react';
+import { Select } from 'antd';
+import apis from '../../services/apis';
+import request from '../../utils/request'
+
+const { Option } = Select;
+
+function usePrevious(props) {
+  const ref = useRef();
+  useEffect(() => {
+    ref.current = props;
+  });
+  return ref.current;
+}
+
+/**
+ *
+ *
+ * @param {*} props
+ * @returns
+ */
+const SalesBatchSelect = props => {
+  const [data, setData] = useState([])
+  const [value, setValue] = useState([])
+  useEffect(() => {
+    getList();
+  }, [props.value])
+
+
+  const getList = e => {
+    request({ ...apis.house.apartmentList, params: { pageNum: 1, pageSize: 999, buildingId: props.buildingId} }).then(data => {
+        setData(data.records)
+        checkValue(data.records)
+        // 默认选中第一个
+    })
+  }
+
+
+  const checkValue = (data) => {
+    if (props.value) {
+      const tempData = data.filter(f => f.apartmentId == props.value)
+      const va = (tempData.length > 0) ? props.value : '已删除，请重新选择'
+      props.onChange(va)
+
+    }
+  }
+
+  return (
+      <Select
+      showSearch
+      value={props.value}
+      style={{ width: '300px' }}
+      placeholder="请选择批次"
+      onChange={props.onChange}
+      filterOption={(input, option) =>
+        option.props.children && option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
+      }>
+          {data.map(apartment => (
+            <Option key={apartment.apartmentId} value={apartment.apartmentId}>{apartment.apartmentName}</Option>
+          ))}
+      </Select>
+  )
+}
+export default SalesBatchSelect

src/components/HouseSelect/UnitSelect.jsx

@@ -0,0 +1,64 @@
+import React, { useState, useEffect, useRef } from 'react';
+import { Select } from 'antd';
+import apis from '../../services/apis';
+import request from '../../utils/request'
+
+const { Option } = Select;
+
+function usePrevious(props) {
+  const ref = useRef();
+  useEffect(() => {
+    ref.current = props;
+  });
+  return ref.current;
+}
+
+/**
+ *
+ *
+ * @param {*} props
+ * @returns
+ */
+const UnitSelect = props => {
+  const [data, setData] = useState([])
+  const [value, setValue] = useState([])
+  useEffect(() => {
+    getList();
+  }, [props.value])
+
+
+  const getList = e => {
+    request({ ...apis.house.unit, params: { pageNum: 1, pageSize: 999, buildingId: props.buildingId, blockId: props.blockId} }).then(data => {
+        setData(data.records)
+        checkValue(data.records)
+        // 默认选中第一个
+    })
+  }
+
+
+  const checkValue = (data) => {
+    if (props.value) {
+      const tempData = data.filter(f => f.buildingId == props.value)
+      const va = (tempData.length > 0) ? props.value : '已删除，请重新选择'
+      props.onChange(va)
+
+    }
+  }
+
+  return (
+      <Select
+      showSearch
+      value={props.value}
+      style={{ width: '300px' }}
+      placeholder="请选择单元"
+      onChange={props.onChange}
+      filterOption={(input, option) =>
+        option.props.children && option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
+      }>
+          {data.map(unit => (
+            <Option key={unit.unitId} value={unit.unitId}>{unit.unitName}</Option>
+          ))}
+      </Select>
+  )
+}
+export default UnitSelect

src/components/MiniQRCode/index.jsx

@@ -0,0 +1,166 @@
+import React, { PureComponent } from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+import { Button, Modal, Tooltip } from 'antd'
+import { fetch, apis } from '../../utils/request'
+
+import Style from './style.less'
+
+const fetchQRCode = fetch(apis.image.qrcode)
+
+function encodeParam (o) {
+  return Object.keys(o).map((k) => {
+    const v = encodeURIComponent(o[k] || '')
+    return `${k}=${v}`
+  }).join('&')
+}
+
+class MiniQRCode extends PureComponent {
+  constructor(props) {
+    super(props)
+
+    this.state = {
+      previewVisible: false,
+      qrcode: undefined,
+      loading: false,
+    }
+  }
+
+  componentDidMount() {
+    if (this.props.targetId && this.props.value) {
+      const params = this.getQRCodeParams(this.props)
+
+      if (!params) return;
+
+      this.setState({
+        qrcode: {
+          img: this.props.value,
+          params,
+        }
+      })
+    }
+  }
+
+  componentDidUpdate(prevProps) {
+    const preParams = this.getQRCodeParams(prevProps)
+    const curParams = this.getQRCodeParams(this.props)
+
+    // 需要重新生成二维码
+    if (preParams !== curParams) {
+      this.createQRCode()
+      return
+    }
+
+    // 如果 value 有了更新
+    const { img } = this.state.qrcode || {}
+    if (prevProps.value !== this.props.value && this.props.value !== img) {
+      this.setState({
+        qrcode: {
+          img: this.props.value,
+          params: curParams,
+        }
+      })
+    }
+  }
+
+  getQRCodeParams = (props) => {
+    const { targetId, sceneParams = {}, page, params = {} } = props
+
+    if (!targetId || !page) {
+      return;
+    }
+
+    const sceneObj = {
+      id: targetId,
+      ...sceneParams,
+    }
+
+    return JSON.stringify({
+      scene: encodeParam(sceneObj),
+      page,
+      ...params,
+    })
+  }
+
+  createQRCode = () => {
+    const params = this.getQRCodeParams(this.props)
+
+    if (!params) {
+      return;
+    }
+
+    this.setState({ loading: true }, () => {
+      fetchQRCode({ data: { params } }).then((img) => {
+        this.setState({ qrcode: { img, params }, loading: false }, () => {
+          if (this.props.onChange) {
+            this.props.onChange(img)
+          }
+        })
+      })
+    })
+  }
+
+  handleThumbClick = () => {
+    this.setState({ previewVisible: true })
+  }
+
+  handleCancel = () => {
+    this.setState({ previewVisible: false })
+  }
+
+  handleBtnClick = () => {
+    this.createQRCode()
+  }
+
+  render() {
+    const { loading, qrcode = {}, previewVisible } = this.state
+    const { className, style, size } = this.props
+    const icon = !qrcode.img ? 'plus' : 'redo'
+    const btnText = !qrcode.img ? '生成' : '重新生成'
+    const clsList = classNames(Style.miniQRCode, className)
+    const styleUsed = style || {}
+    const thumbSize = size || 120
+    const thumbStyle = {
+      width: `${thumbSize}px`,
+      height: `${thumbSize}px`,
+    }
+    const btnSize = thumbSize > 96 ? 'default' : 'small'
+
+    return (
+      <div className={clsList} style={styleUsed}>
+        {
+          qrcode.img && (
+            <Tooltip title={qrcode.params}>
+              <div className={Style.thumb} onClick={this.handleThumbClick} style={thumbStyle}>
+                <img src={qrcode.img} alt=""/>
+              </div>
+            </Tooltip>
+          )
+        }
+        <div className={Style.body}>
+          <Button loading={loading} size={btnSize} icon={icon} onClick={this.handleBtnClick}>{btnText}</Button>
+        </div>
+        <Modal visible={previewVisible} footer={null} onCancel={this.handleCancel}>
+          <img alt="preview" style={{ width: '100%' }} src={qrcode.img} />
+        </Modal>
+      </div>
+    );
+  }
+}
+
+MiniQRCode.propTypes = {
+  value: PropTypes.string,
+  onChange: PropTypes.func,
+  targetId: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.number,
+  ]),
+  page: PropTypes.string,
+  sceneParams: PropTypes.object,
+  params: PropTypes.object,
+  className: PropTypes.string,
+  style: PropTypes.object,
+  size: PropTypes.number,
+}
+
+export default MiniQRCode

src/components/MiniQRCode/style.less

@@ -0,0 +1,20 @@
+.miniQRCode {
+  background: transparent;
+  display: flex;
+  align-items: center;
+
+  .thumb {
+    flex: none;
+    padding: 8px;
+    margin-right: 12px;
+
+    img {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  .body {
+    flex: auto;
+  }
+}