manage

estateagents-admin-manager/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;

estateagents-admin-manager/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);

estateagents-admin-manager/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);

estateagents-admin-manager/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);

estateagents-admin-manager/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>
+      </>
+    );
+  }
+}

estateagents-admin-manager/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;
+      }
+    }
+  }
+}

estateagents-admin-manager/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;

estateagents-admin-manager/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;
+  }
+}