pc-admin/src/pages/customer/Customer/PrivateCustomer/index.jsx

import React, { useState, useMemo, useRef } from 'react';
import { Avatar, Button, message } from 'antd';
import router from 'umi/router';
import QueryTable from '@/components/QueryTable';
import apis from '@/services/apis';
import request from '@/utils/request';
import withActions from '@/components/ActionList';
import AuthButton from '@/components/AuthButton';
import Styles from '../style.less';
import ChangeStatus from './components/ChangeStatus';
import Attribution from './components/Attribution';
import IntegralRecord from './components/IntegralRecord';
import Recommend from './components/Recommend';
import getSearchFields from './searchFields';

const actionList = {
  changeStatus: 'changeStatus', // 变更状态
  attribution: 'attribution', //调整归属
  integralRecord: 'integralRecord', //积分记录
  recommend: 'recommend', //推荐客户
};

const PrivateCustomer = () => {
  const ref = useRef();

  const [showModel, SetShowModel] = useState({});
  const [exportLoding, setExportLoding] = useState(false);

  const handShowModel = (record, actionType) => {
    SetShowModel({
      [actionList[actionType]]: {
        visible: true,
        data: record,
      },
    });
  };

  function toCustomerDateil(record) {
    router.push({
      pathname: '/customer/customerlist/privateCustomerDetail',
      query: {
        id: record.customerId,
      },
    });
  }

  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: 'recommendName',
        key: 'recommendName',
        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 '签约';
          }
          if (records.status === 5) {
            return '结佣';
          }
          // if (records.status === 6) {
          //   return '报废';
          // }
        },
      },
      {
        title: '操作',
        dataIndex: 'customerId',
        key: 'customerId',
        align: 'center',
        width: '20%',
        render: withActions((_, record) => [
          <AuthButton name="customer.detail">
            <Button type="link" onClick={() => toCustomerDateil(record)}>
              查看详情
            </Button>
          </AuthButton>,
          // <EditIcon color="#FF4A4A" text="查看详情" onClick={() => toCustomerDateil(record)} />,
          <AuthButton name="customer.status.change" noRight={null}>
            <Button
              type="link"
              onClick={() => {
                router.push({
                  pathname: '/customer/customer/StatusChange',
                  query: {
                    id: record.customerId,
                    buildingId:record.buildingId
                  },
                });
              }}
            >
              变更状态
            </Button>
          </AuthButton>,

          <AuthButton name="customer.belong.change" noRight={null}>
            <Button type="link" onClick={() => handShowModel(record, actionList.attribution)}>
              调整归属
            </Button>
          </AuthButton>,
        ]),
      },
    ];
  }, []);

  //导出
  function exportCustomer() {
    console.log(ref.current, 'ref');
    setExportLoding(true);

    request({
      ...apis.customer.customerRecommendExport,
      responseType: 'blob',
      params: ref.current.getSearchData,
    })
      .then(response => {
        download(response);
        setExportLoding(false);
      })
      .catch(() => {
        message.err('连接超时');
        setExportLoding(false);
      });
  }

  function download(data) {
    if (!data) {
      return;
    }
    const url = window.URL.createObjectURL(new Blob([data]));
    const link = document.createElement('a');
    link.style.display = 'none';
    link.href = url;
    link.setAttribute('download', '客户列表.xlsx');
    document.body.append(link);
    link.click();
  }

  const searchFields = useMemo(getSearchFields, []);

  //操作成功请求数据
  const handleCancel = () => {
    SetShowModel({});
    ref.current.reload();
  };

  const actionRender = () => {
    return (
      <Button type="danger" loading={exportLoding} onClick={() => exportCustomer()}>
        导出
      </Button>
    );
  };
  return (
    <>
      <QueryTable
        ref={ref}
        rowKey="customerId"
        api={apis.customer.customerRecommend}
        searchFields={searchFields}
        params={{
          customerType: 'private',
        }}
        columns={columns}
        actionRender={actionRender}
        //   onPageChange={(pg) => setPage(pg)}
      />

      <ChangeStatus
        modelProps={showModel[actionList.changeStatus]}
        handleCancel={handleCancel}
        onCancel={() => SetShowModel({})}
      ></ChangeStatus>

      <Attribution
        modelProps={showModel[actionList.attribution]}
        handleCancel={handleCancel}
        onCancel={() => SetShowModel({})}
      />

      <IntegralRecord
        modelProps={showModel[actionList.integralRecord]}
        handleCancel={handleCancel}
        onCancel={() => SetShowModel({})}
      />

      <Recommend
        modelProps={showModel[actionList.recommend]}
        handleCancel={handleCancel}
        onCancel={() => SetShowModel({})}
      />
    </>
  );
};

export default PrivateCustomer;