提交

config/routes.js

                 hideInMenu: true,
                 component: './staff/list/addRole',
               },
+              {
+                path: '/staff/list/distribution',
+                name: '分配归属',
+                hideInMenu: true,
+                component: './staff/list/distribution',
+              },
             ],
           },
           {

src/components/XForm/ImageUpload.jsx

     );
 
     const value = this.props.value;
-
     return (
       <Upload
         listType="picture-card"

src/components/XForm/WrapperForm.jsx

 
   render () {
     const {fields, form, children, submitBtn, cancelBtn, ...formProps} = this.props;
-
+    console.log('fields:', fields)
     const FeildItems = (fields || []).filter(x => x).map((props, inx) => (<WrapperItem key={inx} {...props} form={form} />))
     
     return (

src/components/XForm/WrapperItem.jsx

         Field = <Select placeholder={placeholder} style={{ width: '100%' }} {...fieldProps}>{SelectOpts}</Select>
         break;
       case FieldTypes.ImageUploader:
-        Field = <ImageUploader {...fieldProps}/>
+        const beforeUpload = { beforeUpload: props.beforeUpload }
+        Field = <ImageUploader {...fieldProps} { ...beforeUpload}/>
         break;
       default:
         throw new Error(`暂时不支持的组件类型: ${type}`)

src/pages/news/list/style.less

     white-space: nowrap;
     overflow: hidden;
   }
+
+  .SubmitButton {
+    background: rgba(239,39,58,1);
+    border-radius: 7px;
+    border: 0px;
+  }
+  .SelectFrom {
+    width: 180px;
+    background: #ffffff;
+    border-radius: 7px;
+    border: 1px solid #dbdbdb;
+  }
+  .addButton {
+    background: #50be00;
+    border-radius: 4px;
+    border: 0px;
+    margin: 10px 0px;
+  }
+  .cardText {
+    color: #333;
+    display: flex;
+    align-items: center;
+    position: relative;
+    line-height: 1.5;
+    font-size: 0.106rem;
+    margin-bottom: 0.08rem;
+  
+  }
+  .cardItem{
+    font-size: 0.106rem;
+    font-weight: 400;
+    color: #666;
+    line-height: 24px;
+    display: flex;
+    align-items: center;  
+  }
+  .ediText {
+    font-size:  0.106rem;
+    color: #ff925c;
+    line-height: 24px;
+    position: absolute;
+    right: 0;
+  }
+  .title{
+    display: inline-block;
+    width:  0.54rem;
+    justify-content: space-between;
+    text-align: justify;
+    text-align-last:justify
+  }
+  
+  .address { 
+    width: 400px;
+    height: 24px; 
+    text-overflow: ellipsis; 
+    white-space: nowrap;
+    overflow: hidden;
+  }
+  
+  
   
   

src/pages/staff/components/attribution.jsx

+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';
+
+
+const { Option } = Select;
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const { Meta } = Card;
+
+/**
+ * 调整归属
+ *
+ * @param {*} props
+ * @returns
+ */
+class ModalAttribution extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+       dataSource: { records: [] },
+       visibleData: { visible: false, realtyConsultant: '', buildingId: '', userId: '' },
+    }
+  }
+
+  // 挂载之后
+  componentDidMount() {
+    // this.getList({ pageNumber: 1, pageSize: 5 })
+  }
+
+  componentDidUpdate(preProps, preState) {
+    if (this.props.visibleData.visible !== preState.visibleData.visible) {
+      this.getList({ pageNumber: 1, pageSize: 5, buildingId: this.props.visibleData.buildingId })
+      // eslint-disable-next-line react/no-did-update-set-state
+      this.setState({ visibleData: this.props.visibleData });
+    }
+  }
+
+  // 弹框确定按钮
+  // eslint-disable-next-line react/sort-comp
+  handleOk() {
+    this.props.onCancel()
+  }
+
+  // 弹框取消按钮
+  handleCancel() {
+    this.props.onCancel()
+  }
+
+  getList(params) {
+    if (params.buildingId === '' || params.buildingId === null || params.buildingId === undefined) {
+      return
+    }
+
+    // 网路请求
+    request({ ...apis.customer.buildingConsultant, params: { ...params } }).then(res => {
+      const records = res.records.filter(f => f.userId !== this.state.visibleData.userId)
+      this.setState({ dataSource: { ...res, records, total: res.total - 1 } })
+    }).catch(() => {
+      // eslint-disable-next-line no-unused-expressions
+
+    })
+  }
+
+  openNotificationWithIcon = (type, message) => {
+    notification[type]({
+      message,
+      description:
+        '',
+    });
+  };
+
+   // 分页
+  onChange(pageNum) {
+    this.getList({ pageNumber: pageNum, pageSize: 5, buildingId: this.props.visibleData.buildingId })
+  }
+
+  // 提交
+  submitGm(record) {
+
+    console.log('传递之前：', record)
+    this.handleCancel()
+    this.props.onSuccess({ realtyConsultant: record.userId, name: record.userName })
+  }
+
+  render() {
+    const columns = [
+      // {
+      //   title: '编号',
+      //   dataIndex: 'personId',
+      //   key: 'personId',
+      // },
+      {
+        title: '姓名',
+        dataIndex: 'userName',
+        key: 'userName',
+      },
+      {
+        title: '电话',
+        dataIndex: 'phone',
+        key: 'phone',
+      },
+      {
+        title: '部门',
+        dataIndex: 'department',
+        key: 'department',
+      },
+      {
+        title: '岗位',
+        dataIndex: 'position',
+        key: 'position',
+      },
+      {
+        title: '操作',
+        dataIndex: 'personId',
+        key: 'personId',
+        // eslint-disable-next-line no-nested-ternary
+        render: (_, record) => <>{ this.props.visibleData.realtyConsultant !== record.userId && <Button type="danger" onClick={() => this.submitGm(record)}>确定</Button>}</>,
+      },
+    ]
+    return (
+      <>
+        <Modal
+            title="选择置业顾问"
+            width={800}
+            destroyOnClose="true"
+            footer={null}
+            visible={this.state.visibleData.visible}
+            // onOk={() => this.handleOk()}
+            onCancel={(e) => this.handleCancel(e)}
+          >
+            <Table rowKey="attribution" dataSource={this.state.dataSource.records} columns={columns} pagination={{ total: this.state.dataSource.total, onChange: e => this.onChange(e) }} />
+          </Modal>
+      </>
+    );
+  }
+}
+
+export default ModalAttribution

src/pages/staff/list/StaffList.jsx

 
 import React, { useState, useEffect } from 'react';
-import { Form, Input, Button, Icon, Select, message, Table, Divider, Row, Col, Tag, Pagination, Modal, DatePicker } from 'antd';
+import { Form, Input, Button, Icon, Select, message, Table, Divider, Row, Col, Tag, Pagination, Modal, DatePicker , Card, Avatar } from 'antd';
 import { FormattedMessage } from 'umi-plugin-react/locale';
 import styles from '../../style/GoodsList.less';
 import router from 'umi/router';
-import { Card, Avatar } from 'antd';
+
 import apis from '../../../services/apis';
 import request from '../../../utils/request'
 import Styles from './style.less';
 const { MonthPicker, RangePicker, WeekPicker } = DatePicker;
 
 // 跳转到编辑商品
-const toEditStaff = (userId) => () => {
+const toEditStaff = userId => () => {
   router.push({
     pathname: '/staff/editStaff',
     query: {
-      userId
+      userId,
     },
   });
 }
  *
  * @returns
  */
-const CartBody = (props) => {
+const CartBody = props => {
   const { data } = props
   // console.log("data11:", data)
 
-  const confirm = (data) => () => {
+  const confirm = data => () => {
     // console.log(data, "11111")
     if (data.status === 1) {
       Modal.confirm({
         okText: '确认',
         cancelText: '取消',
         onOk () {
-          request({ ...apis.staff.change, urlData: { id: data.userId, type: 'off' } }).then((data) => {
-            message.info("操作成功")
+          request({ ...apis.staff.change, urlData: { id: data.userId, type: 'off' } }).then(data => {
+            message.info('操作成功')
             props.onFresh()
           })
-        }
+        },
       });
     } else {
       Modal.confirm({
         okText: '确认',
         cancelText: '取消',
         onOk () {
-          request({ ...apis.staff.change, urlData: { id: data.userId, type: 'on' } }).then((data) => {
-            message.info("操作成功")
+          request({ ...apis.staff.change, urlData: { id: data.userId, type: 'on' } }).then(data => {
+            message.info('操作成功')
             props.onFresh()
           })
-        }
+        },
       });
     }
-
   }
 
   // 员工离职
   const departure = row => {
-    console.log('row:', row)
-
     // 是置业顾问
     if (row.isConsultant === true) {
-
+      // 跳转路由
+      router.push({
+        pathname: '/staff/list/distribution',
+        query: {
+          id: row.userId,
+        },
+      })
       return
     }
 
       okText: '确认',
       cancelText: '取消',
       onOk () {
-        // request({ ...apis.staff.change, urlData: { id: data.userId, type: 'off' } }).then((data) => {
-        //   message.info("操作成功")
-        //   props.onFresh()
-        // })
-      }
-    });
+        request({ ...apis.staff.departure, urlData: { id: row.userId } }).then(() => {
+          message.info('操作成功')
+          props.onFresh()
+        }).catch(() => {
 
+        })
+      },
+    });
   }
 
   return (
 
         <span>
           {
-            data.taTagsList.map((item, index) => {
-              return <Tag className={Styles.cardTag} color={item.tagColor}>{item.tagName}</Tag>
-            })
+            data.taTagsList.map((item, index) => <Tag className={Styles.cardTag} color={item.tagColor}>{item.tagName}</Tag>)
           }
         </span>
 
   )
 }
 
-const header = (props) => {
+const header = props => {
   const [tempData, setTempData] = useState({ records: [] })
   useEffect(() => {
     getList({ pageNum: 1, pageSize: 8 });
   }, [])
 
-  const getList = (params) => {
-    request({ ...apis.staff.taUser, params: { ...params } }).then((data) => {
-      console.log(data, "listData")
+  const getList = params => {
+    request({ ...apis.staff.taUser, params: { ...params } }).then(data => {
+      console.log(data, 'listData')
       setTempData(data)
     })
   }
 
   // 分页
-  const onChange = (pageNumber) => {
+  const onChange = pageNumber => {
     getList({ pageNum: pageNumber, pageSize: 8, ...props.form.getFieldsValue() });
   }
 
     });
   }
 
-  //重置搜索
+  // 重置搜索
   function handleReset () {
     props.form.resetFields();
     getList({ pageNum: 1, pageSize: 8 });
       </Row>
 
       {/* 分页  */}
-      <div style={{ display: 'flex', justifyContent: 'flex-end' }}>     
+      <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
         <Pagination showQuickJumper defaultCurrent={1} pageSize={8} total={tempData.total} onChange={onChange} current={tempData.current}/>
       </div>
     </>

src/pages/staff/list/distribution.jsx

+import React, { useState, useEffect } from 'react';
+import { Button, Table, message, Modal } from 'antd';
+
+import apis from '../../../services/apis';
+import request from '../../../utils/request';
+import ModalAttribution from '../components/attribution';
+import { router } from 'umi';
+
+function body(props) {
+    console.log('props.localtion.query: ', props.location.query)
+
+    const { id } = props.location.query
+    
+
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const [dataSource, setDataSource] = useState({ records: [], current: 1, size: 10, total: 0 })
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const [consultant, setConsultant] = useState({ consultantUserId: '', consultantName: '' })
+
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const [selectedRowIndex, setSelectedRowIndex] = useState([])
+
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const [customerIdList, setCustomerIdList] = useState([])
+
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const [visibleData, setVisibleData] = useState({ visible: false, realtyConsultant: '', buildingId: '', userId: '' })
+
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const [userData, setUserData] = useState({})
+
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    useEffect(() => {
+        if (id) {
+            getList({ pageNumber: 1, pageSize: 99999, userId: id })
+            getUserData(id)
+        }
+    }, [])
+
+    function getList(params) {
+        // 网路请求
+        request({ ...apis.customer.byUserIdSelectCustomer, urlData: { id: params.userId }, params: { ...params } }).then(res => {
+          setDataSource(res)
+        }).catch(() => {
+
+        })
+    }
+
+     // 查询列表
+    function getUserData(userId) {
+        request({ ...apis.staff.getTaUser, urlData: { id: userId } }).then((data) => {
+            setUserData(data)
+        })
+    }
+
+    function onShow() {
+        setVisibleData({ visible: true, realtyConsultant: '', buildingId: userData.buildingId, userId: userData.userId })
+    }
+
+    function onCancel() {
+        setVisibleData({ visible: false, realtyConsultant: '', buildingId: '', userId: '' })
+    }
+
+    function onSuccess({ realtyConsultant, name }) {
+        setConsultant({ consultantUserId: realtyConsultant, consultantName: name })
+    }
+
+    function onSubmit() {
+        if (customerIdList.length !== dataSource.total) {
+            message.error('存在未分配归属客户')
+            return
+        }
+
+        if (consultant.consultantId === '') {
+            message.error('请选择分配归属的置业顾问')
+            return
+        }
+
+        Modal.confirm({
+            title: '确认保存后，当前员工下的客户数据将转移',
+            content: '同时删除此员工所有数据，确认进行保存操作？',
+            okText: '确认',
+            cancelText: '取消',
+            onOk () {
+                request({ ...apis.staff.departure, urlData: { id: userData.userId }, params: { customerIdList, consultantUserId: consultant.consultantUserId } }).then(() => {
+                    message.info('操作成功')
+                    props.onFresh()
+                    router.go(-1)
+                }).catch(() => {
+          
+                })
+            },
+          });
+    }
+
+    const rowSelection = {
+        selectedRowKeys: selectedRowIndex,
+        hideDefaultSelections: true,
+        onChange: (selectedRowKeys, selectedRows) => {
+          console.log('selectedRowKeys: ', selectedRowKeys, 'selectedRows: ', selectedRows, selectedRowKeys);
+          setSelectedRowIndex(selectedRowKeys)
+          setCustomerIdList(selectedRows.map(p => p.customerId))
+        },
+    };
+
+    const columns = [
+        {
+          title: '用户名',
+          dataIndex: 'name',
+          key: 'name',
+          align: 'center',
+        },
+        {
+          title: '手机号',
+          dataIndex: 'phone',
+          align: 'center',
+          key: 'phone',
+        },
+        {
+            title: '状态',
+            dataIndex: 'reportRecommendStatus',
+            key: 'reportRecommendStatus',
+            align: 'center',
+            // eslint-disable-next-line no-nested-ternary
+            render: (text, records) => {
+              if (records.status === 1) { return '报备' }
+              if (records.status === 2) { return '到访' }
+              if (records.status === 3) { return '认筹' }
+              if (records.status === 4) { return '签约' }
+            },
+          },
+        {
+            title: '调整后归属',
+            dataIndex: 'consultantName',
+            key: 'consultantName',
+            align: 'center',
+            render: (text, records, index) => {
+                return selectedRowIndex.includes(index) ? consultant.consultantName : ''
+            },
+        },
+      ];
+
+    return (
+        <>
+            <Button type="primary" onClick={() => onShow()}>分配归属</Button>
+            <Table rowSelection={rowSelection} dataSource={dataSource.records} columns={columns} pagination={{ pageSize: dataSource.size, current: dataSource.current, total: dataSource.total }} />
+            <div style={{ display: 'flex', justifyContent: 'center', marginTop: '20px' }}>
+                <Button type="primary" onClick={() => onSubmit()}>保存</Button>
+                &nbsp;&nbsp;&nbsp;&nbsp;
+                <Button onClick={() => router.go(-1)}>取消</Button>
+            </div>
+
+            {/* 选择只顾问弹框 */}
+            <ModalAttribution visibleData={visibleData} onCancel={() => onCancel()} onSuccess={e => onSuccess(e)}/>
+        </>
+    )
+}
+
+export default body

src/pages/staff/list/editStaff.jsx

     }
   }
 
+  const photoBeforeUpload = (file) => {
+    // const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
+    // if (!isJpgOrPng) {
+    //   message.error('请上传 JPG/PNG 格式的图片!');
+    // }
+    console.log(file.size, file.size / 1024)
+    const isLt100k = (file.size / 1024) < 100;
+    if (!isLt100k) {
+      message.error('请上传小于100k的图片!');
+    }
+    return isLt100k;
+  }
+
   const fields = [
     {
       label: '姓名',
       label: '置业顾问头像',
       name: 'photo',
       type: FieldTypes.ImageUploader,
-      extra: '建议图片尺寸：320*320px，比例1:1,格式：jpg，用于置业顾问头像',
+      extra: '建议图片尺寸：320*320px，比例1:1,格式：jpg，用于置业顾问头像,限制大小：100k',
       value: userData.photo,
+      beforeUpload: (e) => photoBeforeUpload(e),
       rules: [
         { required: true, message: '请选择头像' },
       ]

src/services/apis.js

       url: `${prefix}/customer/recommend/:id`,
       action: 'admin.customer.recommend.get',
     },
+    byUserIdSelectCustomer: { // 根据置业顾问查询客户
+      method: 'GET',
+      url: `${prefix}/customer/list/:id`,
+      action: 'admin.customer.list.get',
+    },
   },
   indexEcharts: {
     list:{
       method: 'PUT',
       action: 'admin.turn.taUser.put',  
     },
+    departure: {
+      url: `${prefix}/user/departure/:id`,
+      method: 'PUT',
+      action: 'admin.user.departure.put',
+    },
   },
   channelList: {
     getList: {