客户列表 变更状态

src/pages/building/type/edi.jsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import { Input, Button, Row, Col, Form, Alert } from 'antd';
+import { Input, Button, Row, Col, Form, Alert, notification } from 'antd';
 import router from 'umi/router';
 import Styles from './style.less';
 import request from '../../../utils/request';
@@ -40,6 +40,14 @@ function body(props) {
     })
   }
 
+  const openNotificationWithIcon = (type, message) => {
+    notification[type]({
+      message,
+      description:
+        '',
+    });
+  }
+
   function submitData(dataSources) {
     if (id !== '') {
       // 修改
@@ -51,25 +59,11 @@ function body(props) {
     dataSources.createDate = new Date()
     request({ ...apis.buildingType.add, data: { ...dataSources } }).then(() => {
       // eslint-disable-next-line no-unused-expressions
-      <Alert
-        style={{
-          marginBottom: 24,
-        }}
-        message="操作成功"
-        type="success"
-        showIcon
-      />
+      this.openNotificationWithIcon('success', '操作成功')
       router.go(-1)
     }).catch(err => {
       // eslint-disable-next-line no-unused-expressions
-      <Alert
-        style={{
-          marginBottom: 24,
-        }}
-        message={ err }
-        type="err"
-        showIcon
-      />
+      this.openNotificationWithIcon('error', err)
     })
   }
 

src/pages/customer/customerlist/components/attribution.jsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import { Form, Icon, Input, Button, DatePicker, Select, Card, Row, Col, Pagination, Alert, Table, Avatar, Radio, Modal, Descriptions } from 'antd';
+import { Form, Icon, Input, Button, DatePicker, Select, Card, Row, Col, Pagination, Alert, Table, Avatar, Radio, Modal, Descriptions, notification } from 'antd';
 import moment from 'moment';
 import request from '../../../../utils/request';
 import apis from '../../../../services/apis';
@@ -31,6 +31,7 @@ class ModalAttribution extends React.Component {
   }
 
   componentDidUpdate(preProps, preState) {
+    console.log(this.props.visibleData.realtyConsultant)
     if (this.props.visibleData.customerId !== preState.visibleData.customerId) {
       this.getList({ pageNumber: 1, pageSize: 5 })
       this.setState({ visibleData: this.props.visibleData });
@@ -65,34 +66,42 @@ class ModalAttribution extends React.Component {
     })
   }
 
+  openNotificationWithIcon = (type, message) => {
+    notification[type]({
+      message,
+      description:
+        '',
+    });
+  };
+
    // 分页
   onChange(pageNum) {
     this.getList({ pageNumber: pageNum, pageSize: 5 })
   }
 
   // 提交
-  submitGm() {
+  submitGm(record) {
     const { url, method } = apis.customer.recommendEdit
     const tempUrl = url.substring(0, url.lastIndexOf('id')).concat(this.state.visibleData.customerId)
 
     // 网路请求
-    request({ url: tempUrl, method, data: { ...this.state.visibleData } }).then(res => {
+    request({ url: tempUrl, method, data: { customerId: this.state.visibleData.customerId, realtyConsultant: record.personId } }).then(res => {
+      // eslint-disable-next-line no-unused-expressions
+      this.openNotificationWithIcon('success', '操作成功')
       this.handleCancel()
     }).catch(err => {
       // eslint-disable-next-line no-unused-expressions
-      <Alert
-        style={{
-          marginBottom: 24,
-        }}
-        message={err}
-        type="error"
-        showIcon
-      />
+      this.openNotificationWithIcon('error', err)
     })
   }
 
   render() {
     const columns = [
+      // {
+      //   title: '编号',
+      //   dataIndex: 'personId',
+      //   key: 'personId',
+      // },
       {
         title: '姓名',
         dataIndex: 'name',
@@ -118,7 +127,7 @@ class ModalAttribution extends React.Component {
         dataIndex: 'personId',
         key: 'personId',
         // eslint-disable-next-line no-nested-ternary
-        render: (_, record) => <><Button className={Styles.SubmitButton} onClick={() => this.submitGm()}>确定</Button></>,
+        render: (_, record) => <>{ this.props.visibleData.realtyConsultant !== record.personId && <Button type="danger" onClick={() => this.submitGm(record)}>确定</Button>}</>,
       },
     ]
     return (

src/pages/customer/customerlist/components/changeStatus.jsx

@@ -0,0 +1,84 @@
+import React, { useState, useEffect } from 'react';
+import { Form, Icon, Input, Button, DatePicker, Select, Card, Row, Col, Pagination, Alert, Table, Avatar, Radio, Modal, Descriptions, notification } from 'antd';
+import moment from 'moment';
+import request from '../../../../utils/request';
+import apis from '../../../../services/apis';
+import Styles from '../style.less';
+
+class ChangeStatus extends React.Component {
+  constructor(props) {
+    super(props)
+    this.state = {
+      value: '',
+      visibleData: { visible: false, customerId: '' },
+    }
+  }
+
+  componentDidUpdate(preProps, preState) {
+    if (this.props.visibleData.customerId !== preState.visibleData.customerId) {
+      this.setState({ visibleData: { ...this.props.visibleData } })
+      this.setState({ value: this.props.visibleData.status })
+    }
+  }
+
+  // 弹框取消按钮
+  handleCancel() {
+    this.setState({ visibleData: { visible: false, customerId: '' } })
+  }
+
+  onChange = e => {
+    this.setState({
+      value: e.target.value,
+    });
+  };
+
+  openNotificationWithIcon = (type, message) => {
+    notification[type]({
+      message,
+      description:
+        '',
+    });
+  };
+
+  submitButton = e => {
+    const { url, method } = apis.customer.recommendEdit
+    const tempUrl = url.substring(0, url.lastIndexOf('id')).concat(this.state.visibleData.customerId)
+
+    // 网路请求
+    request({ url: tempUrl, method, data: { customerId: this.state.visibleData.customerId, status: this.state.value } }).then(res => {
+      // eslint-disable-next-line no-unused-expressions
+      this.openNotificationWithIcon('success', '操作成功')
+      this.handleCancel()
+    }).catch(err => {
+      // eslint-disable-next-line no-unused-expressions
+      this.openNotificationWithIcon('error', err)
+    })
+  }
+
+  render() {
+    return (
+      <>
+          <Modal
+            title="变更状态"
+            width={800}
+            destroyOnClose="true"
+            footer={null}
+            visible={this.state.visibleData.visible}
+            // onOk={() => this.handleOk()}
+            onCancel={(e) => this.handleCancel(e)}
+          >
+            <Radio.Group onChange={this.onChange} value={this.state.value}>
+              <Radio value={1}>客户报备</Radio>
+              <Radio value={2}>客户到访</Radio>
+              <Radio value={3}>客户认购</Radio>
+              <Radio value={4}>客户签约</Radio>
+            </Radio.Group>
+
+            <Button type="danger" onClick={this.submitButton}>确定</Button>
+          </Modal>
+      </>
+    )
+  }
+}
+
+export default ChangeStatus

src/pages/customer/customerlist/components/integralRecord.jsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import { Form, Icon, Input, Button, DatePicker, Select, Card, Row, Col, Pagination, Alert, Table, Avatar, Radio, Modal, Descriptions } from 'antd';
+import { Form, Icon, Input, Button, DatePicker, Select, Card, Row, Col, Pagination, Alert, Table, Avatar, Radio, Modal, Descriptions, notification } from 'antd';
 import moment from 'moment';
 import request from '../../../../utils/request';
 import apis from '../../../../services/apis';
@@ -31,7 +31,6 @@ class ModalIntegralRecord extends React.Component {
   }
 
   componentDidUpdate(preProps, preState) {
-    console.log(this.props.visibleData)
     if (this.props.visibleData.customerId !== preState.visibleData.customerId) {
       this.getList({ pageNumber: 1, pageSize: 5 })
       this.setState({ visibleData: this.props.visibleData });
@@ -49,6 +48,14 @@ class ModalIntegralRecord extends React.Component {
     this.setState({ visibleData: { visible: false, customerId: '' } })
   }
 
+  openNotificationWithIcon = (type, message) => {
+    notification[type]({
+      message,
+      description:
+        '',
+    });
+  }
+
   getList(params) {
     const { customerId } = this.state.visibleData
     if (customerId === '' || customerId === undefined) {
@@ -62,15 +69,7 @@ class ModalIntegralRecord extends React.Component {
     request({ url: tempUrl, method, params: { ...params } }).then(res => {
       this.setState({ dataSource: res })
     }).catch(err => {
-      // eslint-disable-next-line no-unused-expressions
-      <Alert
-        style={{
-          marginBottom: 24,
-        }}
-        message={err}
-        type="error"
-        showIcon
-      />
+      this.openNotificationWithIcon('error', err)
     })
   }
 

src/pages/customer/customerlist/index.jsx

@@ -7,6 +7,7 @@ import Styles from './style.less';
 
 import Attribution from './components/attribution'
 import IntegralRecord from './components/integralRecord'
+import ChangeStatus from './components/changeStatus'
 
 
 const { Option } = Select;
@@ -39,6 +40,11 @@ function body(props) {
   const [recordVisibleData, setRecordVisibleData] = useState({ visible: false, customerId: '' })
   // 积分记录 ============= end
 
+  // 变更状态 ============  start
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  const [statusVisibleData, setStatusVisibleData] = useState({ visible: false, customerId: '', status: '' })
+  // 变更状态 ============= end
+
   // eslint-disable-next-line react-hooks/rules-of-hooks
   useEffect(() => {
     getList({ pageNumber: 1, pageSize: 10, customerType })
@@ -61,8 +67,17 @@ function body(props) {
     })
   }
 
+  function displayNone() {
+    setRecordVisibleData({ visible: false, customerId: '' })
+    setGVisibleData({ visible: false, customerId: '', realtyConsultant: '' })
+    setStatusVisibleData({ visible: false, customerId: '', status: '' })
+  }
+
   // 提交事件
   function handleSubmit(e) {
+    displayNone()
+
+
     e.preventDefault();
     props.form.validateFields((err, values) => {
       if (!err) {
@@ -85,6 +100,8 @@ function body(props) {
 
   // 私客/公客切换
   function radioButtonHandleSizeChange(e) {
+    displayNone()
+
     const { value } = e.target
     setCustomerType(value)
     getList({ pageNumber: 1, pageSize: 10, customerType: value })
@@ -93,14 +110,22 @@ function body(props) {
   // 这里有个 Bug， 就是 Modal 弹框，会联动出现， 比如 我点击 调整归属的Model弹框， 那么 积分记录的Model弹框莫名其妙的也显示了
   // 所有这里临时解决方法是，弹出一个Modal对话框的时候，把其他的对话框给隐藏
 
-function showGM(record) {
+  function showGM(record) {
     setGVisibleData({ visible: true, customerId: record.customerId, realtyConsultant: record.realtyConsultant })
     setRecordVisibleData({ visible: false, customerId: '' })
+    setStatusVisibleData({ visible: false, customerId: '' })
   }
 
   function showRecord(record) {
     setRecordVisibleData({ visible: true, customerId: record.customerId })
     setGVisibleData({ visible: false, customerId: '', realtyConsultant: '' })
+    setStatusVisibleData({ visible: false, customerId: '' })
+  }
+
+  function showStatus(record) {
+    setRecordVisibleData({ visible: false, customerId: '' })
+    setGVisibleData({ visible: false, customerId: '', realtyConsultant: '' })
+    setStatusVisibleData({ visible: true, customerId: record.customerId, status: record.status })
   }
 
   const columns = [
@@ -156,7 +181,7 @@ function showGM(record) {
       // eslint-disable-next-line no-nested-ternary
       render: (_, record) => (
         <>
-          <Button className={ customerType === 'private' ? Styles.text : Styles.displayS } type="link">变更状态</Button>
+          <Button className={ customerType === 'private' ? Styles.text : Styles.displayS } type="link" onClick={() => showStatus(record)}>变更状态</Button>
           &nbsp;&nbsp;
           <Button className={ customerType === 'private' ? Styles.text : Styles.displayS } type="link" onClick={() => showGM(record)}>调整归属</Button>
           <br/>
@@ -214,7 +239,7 @@ function showGM(record) {
           )}
         </Form.Item>
         <Form.Item>
-          <Button type="primary" htmlType="submit" className={Styles.SubmitButton}>
+          <Button type="danger" htmlType="submit" >
             搜索
           </Button>
         </Form.Item>
@@ -233,6 +258,9 @@ function showGM(record) {
 
         {/* 积分记录 */}
         <IntegralRecord visibleData={recordVisibleData} />
+
+        {/* 变更状态 */}
+        <ChangeStatus visibleData={statusVisibleData} />
     </>
   );
 }