fix

src/components/QueryTable/index.jsx

@@ -5,7 +5,7 @@ import TableList from '@/components/TableList'
 export default React.forwardRef((props, ref) => {
   const tableRef = useRef()
   const [searchData, setSearchData] = useState({})
-  const {api, searchFields, onPageChange, ...leftProps} = props
+  const {api, searchFields, params, onPageChange, ...leftProps} = props
   const handleSearch = (data) => setSearchData(data)
 
   useImperativeHandle(ref, () => ({
@@ -27,7 +27,7 @@ export default React.forwardRef((props, ref) => {
       <TableList
         ref={tableRef}
         api={api}
-        params={searchData}
+        params={Object.assign(searchData, params||{})}
         {...leftProps}
         onPageChange={onPageChange}
       />

src/pages/building/type/index.jsx

@@ -1,5 +1,5 @@
-import React, { useState, useEffect } from 'react';
-import { Button, Tag, notification, Modal } from 'antd';
+import React from 'react';
+import { Button, Tag,  Modal } from 'antd';
 
 import router from 'umi/router';
 import moment from 'moment';
@@ -7,13 +7,11 @@ import withActions from '@/components/ActionList';
 import EditIcon from '@/components/EditIcon';
 import AuthButton from '@/components/AuthButton';
 import TableList from '@/components/TableList';
-import request from '../../../utils/request';
+// import request from '../../../utils/request';
 import apis from '../../../services/apis';
 
 export default function BuildType() {
-  // eslint-disable-next-line react-hooks/rules-of-hooks
-  const [data, setData] = useState([{ records: [] }]);
-  const [page, setPage] = useState({ current: 1, pageSize: 10 });
+
 
   const columns = [
     {
@@ -21,7 +19,7 @@ export default function BuildType() {
       dataIndex: 'index',
       key: 'index',
       align: 'center',
-      render: (text, record, index) => <span>{index + 1}</span>,
+      render: (_text, _record, index) => <span>{index + 1}</span>,
     },
     {
       title: '类型名称',
@@ -57,35 +55,6 @@ export default function BuildType() {
     },
   ];
 
-  // eslint-disable-next-line react-hooks/rules-of-hooks
-  useEffect(() => {
-    getList({ pageNum: 1, pageSize: 10 });
-  }, []);
-
-  const openNotificationWithIcon = (type, message) => {
-    notification[type]({
-      message,
-      description: '',
-    });
-  };
-
-  function getList(params) {
-    request({ ...apis.buildingType.getList, params: { ...params } })
-      .then(res => {
-        setData(res);
-      })
-      .catch(err => {
-        // eslint-disable-next-line no-unused-expressions
-        // openNotificationWithIcon('error', err)
-      });
-  }
-
-  // 分页
-  function onChange(pageNumber) {
-    // eslint-disable-next-line no-console
-    console.log('Page: ', pageNumber);
-    getList({ pageNum: pageNumber, pageSize: 10 });
-  }
 
   function deleteType(row) {
     row.status = -1;
@@ -95,20 +64,20 @@ export default function BuildType() {
       okText: '确认',
       cancelText: '关闭',
       onOk: () => {
-        request({
-          ...apis.buildingType.update,
-          urlData: { id: row.buildingTypeId },
-          data: { ...row },
-        })
-          .then(() => {
-            getList({ pageNum: data.current, pageSize: 10 });
-          })
-          .then(() => {
-            openNotificationWithIcon('success', '操作成功');
-          })
-          .catch(err => {
-            // openNotificationWithIcon('error', err.message)
-          });
+        // request({
+        //   ...apis.buildingType.update,
+        //   urlData: { id: row.buildingTypeId },
+        //   data: { ...row },
+        // })
+        //   .then(() => {
+     
+        //   })
+        //   .then(() => {
+        //     openNotificationWithIcon('success', '操作成功');
+        //   })
+        //   .catch(err => {
+        //     // openNotificationWithIcon('error', err.message)
+        //   });
 
         modal.destroy();
       },

src/pages/customer/Customer/PrivateCustomer/components/ChangeStatus.jsx

@@ -0,0 +1,152 @@
+import React, { useState, useEffect } from 'react';
+import {
+  Button,
+  Radio,
+  Modal,
+  notification,
+} from 'antd';
+import request from '@/utils/request';
+import apis from '@/services/apis';
+
+const ChangeStatus = props => {
+  console.log(props, 'props');
+
+  const [value, setValue] = useState();
+
+  const { visible, data } = props.modelProps || {};
+
+  useEffect(() => {
+    console.log(data, 'data');
+    setValue(data?.status);
+  }, [data]);
+
+  const openNotificationWithIcon = (type, message) => {
+    notification[type]({
+      message,
+      description: '',
+    });
+  };
+
+const  submitButton = () => {
+    // 网路请求
+    request({
+      ...apis.customer.recommendEdit,
+      urlData: { id: data.customerId },
+      data: { customerId: data.customerId, status: value },
+    })
+      .then(() => {
+        // eslint-disable-next-line no-unused-expressions
+        openNotificationWithIcon('success', '操作成功');
+        props.handleCancel()
+      })
+      .catch(err => {
+        // eslint-disable-next-line no-unused-expressions
+        openNotificationWithIcon('error', err);
+      });
+  };
+
+  return (
+    <>
+      <Modal
+        title="变更状态"
+        width={800}
+        destroyOnClose="true"
+        footer={null}
+        visible={visible}
+        // onOk={() => this.handleOk()}
+        onCancel={() => props.onCancel()}
+      >
+        {data && (
+          <>
+            <Radio.Group value={value} onChange={e => setValue(e.target.value)}>
+              <Radio value={1}>客户报备</Radio>
+              <Radio value={2}>客户到访</Radio>
+              <Radio value={3}>客户认购</Radio>
+              <Radio value={4}>客户签约</Radio>
+            </Radio.Group>
+            <Button type="primary" onClick={submitButton}>
+              确定
+            </Button>
+          </>
+        )}
+      </Modal>
+    </>
+  );
+};
+
+export default ChangeStatus;
+
+// 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.props.onCancel()
+//   }
+
+//   onChange = e => {
+//     this.setState({
+//       value: e.target.value,
+//     });
+//   };
+
+//   openNotificationWithIcon = (type, message) => {
+//     notification[type]({
+//       message,
+//       description:
+//         '',
+//     });
+//   };
+
+//   submitButton = e => {
+//     // 网路请求
+//     request({ ...apis.customer.recommendEdit, urlData: { id: this.state.visibleData.customerId }, 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/Customer/PrivateCustomer/index.jsx

@@ -1,165 +1,211 @@
-import React, { useState, useEffect, useMemo, useRef } from 'react';
-import { Avatar } from 'antd';
-
+import React, { useState, useMemo, useRef } from 'react';
+import { Avatar, Button } from 'antd';
 import QueryTable from '@/components/QueryTable';
-import request from '@/utils/request';
 import apis from '@/services/apis';
-import Navigate from '@/components/Navigate';
-import getTableColumns from './tableColumns'
+import withActions from '@/components/ActionList';
+import AuthButton from '@/components/AuthButton';
+import Styles from '../style.less';
+import ChangeStatus from './components/ChangeStatus';
 
-function PrivateCustomer(props) {
-    const ref = useRef()
-    const [page, setPage] = useState({current: 1, pageSize: 10})
-  const columns = [
-    {
-      title: '头像',
-      dataIndex: 'picture',
-      key: 'picture',
-      align: 'center',
-      width: '10%',
-      render: (_, record) => (
-        <Avatar
-          shape="square"
-          style={{ color: 'blue', cursor: 'pointer' }}
-          onClick={() => toCustomerDateil(record)}
-          src={record.picture}
-          size={64}
-          icon="user"
-        />
-      ),
-    },
-    {
-      title: '姓名',
-      dataIndex: 'name',
-      key: 'name',
-      align: 'center',
-      width: '10%',
-      // eslint-disable-next-line no-nested-ternary
-      render: (_, record) => (
-        <>
-          <Navigate onClick={() => toCustomerDateil(record)}>{record.name}</Navigate>
-        </>
-      ),
-    },
-    {
-      title: '电话',
-      dataIndex: 'phone',
-      key: 'phone',
-      align: 'center',
-      width: '10%',
-    },
-    {
-      title: '性别',
-      dataIndex: 'sex',
-      key: 'sex',
-      align: 'center',
-      width: '10%',
-      // eslint-disable-next-line no-nested-ternary
-      render: (_, record) => (
-        <>
-          <span>{record.sex === 1 ? '男' : record.sex === 2 ? '女' : '未知'}</span>
-        </>
-      ),
-    },
-    {
-      title: '置业顾问',
-      dataIndex: 'consultantName',
-      key: 'consultantName',
-      align: 'center',
-      width: '10%',
-      // eslint-disable-next-line no-nested-ternary
-      render: (_, record) => (
-        <>
-          <span>{record.consultantName}</span>
-          <br />
-          <span>{record.consultTel}</span>
-        </>
-      ),
-    },
-    {
-      title: '归属项目',
-      dataIndex: 'buildingName',
-      key: 'buildingName',
-      align: 'center',
-      width: '10%',
-    },
-    {
-      title: '推广人员',
-      dataIndex: 'sharePersonName',
-      key: 'sharePersonName',
-      align: 'center',
-      width: '10%',
-    },
-    {
-      title: '客户状态',
-      dataIndex: 'reportRecommendStatus',
-      key: 'reportRecommendStatus',
-      align: 'center',
-      width: '10%',
-      // 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: 'customerId',
-      key: 'customerId',
-      align: 'center',
-      width: '20%',
-      //   render: withActions((text, record) => [
-      //     <EditIcon color="#FF4A4A" text="查看详情" onClick={() => toCustomerDateil(record)} />,
-      //     <AuthButton name="admin.customer.recommend.edit.id.put" noRight={null}>
-      //       <Button className={Styles.text} type="link" onClick={() => showStatus(record)}>变更状态</Button>
-      //     </AuthButton>,
+const actionList = {
+  changeStatus: 'changeStatus', // 变更状态
+};
 
-      //     <AuthButton name="admin.customer.recommend.belong" noRight={null}>
-      //       <Button className={Styles.text} type="link" onClick={() => showGM(record)}>调整归属</Button>
-      //     </AuthButton>,
+const PrivateCustomer = () => {
+  const ref = useRef();
 
-      //     <AuthButton name="admin.mine.taPointsRecords.point.record" noRight={null}>
-      //       <Button className={ Styles.text } type="link" onClick={() => showRecord(record)}>积分记录</Button>
-      //     </AuthButton>,
+  const [showModel, SetShowModel] = useState({
+    // changeStatus: { visible: true, data: {} },
+  });
 
-      //     <AuthButton name="admin.mine.taPointsRecords.id.get" noRight={null}>
-      //       <Button className={ Styles.text} type="link" onClick={() => showRecommend(record.personId)}>推荐客户</Button>
-      //     </AuthButton>
-      //   ]),
-    },
-  ];
+  const handShowModel = (record, actionType) => {
+    SetShowModel({
+      [actionList[actionType]]: {
+        visible: true,
+        data: record,
+      },
+    });
+  };
+  const columns = useMemo(() => {
+    return [
+      {
+        title: '头像',
+        dataIndex: 'picture',
+        key: 'picture',
+        align: 'center',
+        width: '10%',
+        render: (_, record) => (
+          <Avatar
+            shape="square"
+            style={{ color: 'blue' }}
+            src={record.picture}
+            size={64}
+            icon="user"
+          />
+        ),
+      },
+      {
+        title: '姓名',
+        dataIndex: 'name',
+        key: 'name',
+        align: 'center',
+        width: '10%',
+        // eslint-disable-next-line no-nested-ternary
+        // render: (_, record) => (
+        //   <>
+        //     <Navigate onClick={() => toCustomerDateil(record)}>{record.name}</Navigate>
+        //   </>
+        // ),
+      },
+      {
+        title: '电话',
+        dataIndex: 'phone',
+        key: 'phone',
+        align: 'center',
+        width: '10%',
+      },
+      {
+        title: '性别',
+        dataIndex: 'sex',
+        key: 'sex',
+        align: 'center',
+        width: '10%',
+        // eslint-disable-next-line no-nested-ternary
+        render: (_, record) => (
+          <>
+            <span>{record.sex === 1 ? '男' : record.sex === 2 ? '女' : '未知'}</span>
+          </>
+        ),
+      },
+      {
+        title: '置业顾问',
+        dataIndex: 'consultantName',
+        key: 'consultantName',
+        align: 'center',
+        width: '10%',
+        // eslint-disable-next-line no-nested-ternary
+        render: (_, record) => (
+          <>
+            <span>{record.consultantName}</span>
+            <br />
+            <span>{record.consultTel}</span>
+          </>
+        ),
+      },
+      {
+        title: '归属项目',
+        dataIndex: 'buildingName',
+        key: 'buildingName',
+        align: 'center',
+        width: '10%',
+      },
+      {
+        title: '推广人员',
+        dataIndex: 'sharePersonName',
+        key: 'sharePersonName',
+        align: 'center',
+        width: '10%',
+      },
+      {
+        title: '客户状态',
+        dataIndex: 'reportRecommendStatus',
+        key: 'reportRecommendStatus',
+        align: 'center',
+        width: '10%',
+        // eslint-disable-next-line no-nested-ternary
+        render: (_, records) => {
+          if (records.status === 1) {
+            return '报备';
+          }
+          if (records.status === 2) {
+            return '到访';
+          }
+          if (records.status === 3) {
+            return '认购';
+          }
+          if (records.status === 4) {
+            return '签约';
+          }
+        },
+      },
+      {
+        title: '操作',
+        dataIndex: 'customerId',
+        key: 'customerId',
+        align: 'center',
+        width: '20%',
+        render: withActions((_, record) => [
+          <AuthButton name="admin.customer.recommend.edit.id.put" noRight={null}>
+            <Button
+              className={Styles.text}
+              type="link"
+              onClick={() => handShowModel(record, actionList.changeStatus)}
+            >
+              变更状态
+            </Button>
+          </AuthButton>,
+
+          <AuthButton name="admin.customer.recommend.belong" noRight={null}>
+            <Button className={Styles.text} type="link" onClick={() => showGM(record)}>
+              调整归属
+            </Button>
+          </AuthButton>,
 
-  const tableColumns = useMemo(() => {
-    return getTableColumns()
-  }, [page])
+          <AuthButton name="admin.mine.taPointsRecords.point.record" noRight={null}>
+            <Button className={Styles.text} type="link" onClick={() => showRecord(record)}>
+              积分记录
+            </Button>
+          </AuthButton>,
 
+          <AuthButton name="admin.mine.taPointsRecords.id.get" noRight={null}>
+            <Button
+              className={Styles.text}
+              type="link"
+              onClick={() => showRecommend(record.personId)}
+            >
+              推荐客户
+            </Button>
+          </AuthButton>,
+        ]),
+      },
+    ];
+  }, []);
 
-//   const tableColumns = useMemo(()=>columns, []);
+  const searchFields = [
+    {
+      name: 'name',
+      label: '姓名',
+      placeholder: '请输入姓名',
+    }
+  ];
+  //操作成功请求数据
+  const handleCancel = () => {
+    SetShowModel({})
+    ref.current.reload();
+  };
 
   return (
     <>
       <QueryTable
-          ref={ref}
+        ref={ref}
         rowKey="customerId"
         api={apis.customer.customerRecommend}
-        // searchFields={{}}
-        params={{ customerType: 'private' }}
-        columns={tableColumns}
+        searchFields={searchFields}
+        params={{
+          customerType: 'private',
+        }}
+        columns={columns}
         //   actionRender={actionRender}
         //   onPageChange={(pg) => setPage(pg)}
       />
+
+      <ChangeStatus
+        modelProps={showModel[actionList.changeStatus]}
+        handleCancel={handleCancel}
+        onCancel={() => SetShowModel({})}
+      ></ChangeStatus>
     </>
   );
-}
+};
 
 export default PrivateCustomer;

src/pages/customer/Customer/index.jsx

@@ -1,8 +1,8 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState } from 'react';
 import { Radio } from 'antd';
 import PrivateCustomer from './PrivateCustomer';
 
-function Customer(props) {
+const Customer = () => {
   const [customerType, setCustomerType] = useState('private');
 
   return (
@@ -24,6 +24,6 @@ function Customer(props) {
       </div>
     </>
   );
-}
+};
 
 export default Customer;

src/pages/customer/Customer/style.less

@@ -0,0 +1,239 @@
+.SubmitButton {
+  background: rgba(239,39,58,1);
+  border-radius: 7px;
+  border: 0px;
+}
+.text {
+  color: rgba(239,39,58,1);
+}
+.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{
+  color: #666;
+  display: flex;
+  align-items: center; 
+  line-height: 1.5;
+  font-size: 0.106rem;
+  margin-bottom: 0.08rem; 
+}
+.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;
+}
+
+.pitchButton { 
+  border-color: rgba(255,126,72,1);
+  background-color: rgba(255,126,72,1);
+  color: rgba(255,255,255,1); 
+}
+.noButton {
+  border-color: rgba(255,126,72,1);
+  color: rgba(255,126,72,1);
+}
+.displayS {
+  display: none;
+}
+
+
+// 客户详情样式
+.cardBox{
+  display: flex;
+  .leftBox{
+    width:1000px;
+    min-width:350px;
+    height:1000px;
+    background:rgba(255,255,255,1);
+    box-shadow:0px 0px 16px 2px rgba(0,0,0,0.12);
+    border-radius:8px;
+    display: inline-block;
+    margin-right: 30px;
+    padding: 30px;
+    overflow: hidden;
+  }
+  .rightBox{
+    width:865px;
+    min-width:342px;
+    height:290px;
+    background:rgba(255,255,255,1);
+    box-shadow:0px 0px 16px 2px rgba(0,0,0,0.12);
+    border-radius:8px;
+    display: inline-block;
+    margin-right: 30px;
+    padding: 30px;
+    overflow: hidden;
+  }
+  .rightBox{
+    width:-webkit-fill-available;
+    height:315px;
+    min-width: 100%;
+    background:rgba(255,255,255,1);
+    box-shadow:0px 0px 16px 2px rgba(0,0,0,0.12);
+    border-radius:8px;
+    display: inline-block;
+    padding: 30px;
+    overflow: hidden;
+    position: relative;
+  }
+  .rightBoxCentre{
+    width:865px;
+    height:345px;
+    min-width: 60%;
+    background:rgba(255,255,255,1);
+    box-shadow:0px 0px 16px 2px rgba(0,0,0,0.12);
+    border-radius:8px;
+    display: inline-block;
+    padding: 30px;
+    overflow: hidden;
+    position: relative;
+  }
+  .leftBoxCentre{
+    width:100%;
+    height:345px;
+    background:rgba(255,255,255,1);
+    box-shadow:0px 0px 16px 2px rgba(0,0,0,0.12);
+    border-radius:8px;
+    display: inline-block;
+    padding: 30px;
+    overflow: hidden;
+    position: relative;
+  }
+  .tit{
+    font-size:0.15rem;
+    font-weight:600;
+    color:#222;
+    margin: 10px 0 0 0;
+  }
+  .flexBox{
+    display: flex;
+    align-items: end;
+  }
+  .touxiang{
+    width: 120px;
+    width: 120px;
+    border-radius: 6px;
+    margin: 30px 0 20px 0;
+  }
+  .touxiangphoto{
+    width: 80px;
+    height: 80px;
+    margin: 38px 0 0px 0;
+  }
+  .infoItem{
+    color:#666;
+    font-size: 0.1rem;
+    margin: 0 0 30px 0;
+    
+  }
+  .rightItem{
+    color:#666;
+    font-size: 0.1rem;
+    margin: 0 0 15px 0;
+  }
+  .right{
+    width: 25%;
+    min-width: 1.3rem;
+    margin-left: 0.1rem;
+    padding-top: 0.3rem;
+    // position: absolute;
+    // top:108px;
+    // left:170px;
+  }
+  .rightphone{
+  
+    position: absolute;
+    top:108px;
+    left:170px;
+  }
+  .left{
+    position: absolute;
+    top:108px;
+    left:60%;
+  
+  }
+  .rightInfo{
+    width: 25%;
+    min-width: 1.3rem;
+    margin-right: 0.1rem;
+    padding-top: 0.3rem;
+    // position: absolute;
+    // top:108px;
+    // left:80%;
+  }
+
+  .Centered{
+    width: 25%;
+    // position: absolute;
+    // top:108px;
+    // left:30%;
+    min-width: 1.3rem;
+    margin: 0 0 15px 0;
+    color:#666;
+    font-size: 0.1rem;
+    padding-top: 0.3rem;
+  }
+
+  .rightCentered{
+    // position: absolute;
+    // top:108px;
+    // left:55%;
+    width: 25%;
+    min-width: 1.3rem;
+    margin: 0 0 15px 0;
+    padding-top: 0.3rem;
+    color:#666;
+    font-size: 0.1rem;
+  }
+  
+}
+.recordBox{
+  width:100%;
+  background:rgba(255,255,255,1);
+  box-shadow:0px 0px 16px 2px rgba(0,0,0,0.12);
+  border-radius:8px;
+  margin-top: 30px;
+  padding: 30px;
+  .tableName{
+    font-size:24px;
+    font-weight:600;
+    color:#222;
+  }
+}
+