manage

estateagents-admin-manager/src/components/CustomUpload/index.jsx

@@ -0,0 +1,32 @@
+import React, { PureComponent } from 'react'
+import { Upload, Spin } from 'antd';
+import { uploaderProps } from '@/utils/upload'
+
+export default class extends PureComponent {
+  state = {
+    loading: false,
+  }
+  
+  handleChange = ({ file, fileList }) => {
+    const { status, response } = file
+    this.setState({ fileList, loading: status === "uploading" })
+
+    if (typeof this.props.onChange === 'function' && status != "uploading") {
+      const image = status === 'done' ? response : undefined
+      this.props.onChange(image);
+    }
+  };
+
+  render() {
+    return (
+      <Upload
+        {...uploaderProps}
+        onChange={this.handleChange}
+      >
+        <Spin spinning={this.state.loading}>
+          {this.props.children}
+        </Spin>
+      </Upload>
+    )
+  }
+}

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

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

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

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

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

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