pc-admin/src/pages/activity/lookHouseActivity/index.jsx

import React, { useState, useEffect, useRef } from 'react';
import {
  Form,
  Input,
  Button,
  Icon,
  Typography,
  message,
  Table,
  Pagination,
  Modal,
  DatePicker,
  Card,
} from 'antd';
import router from 'umi/router';
import moment from 'moment';
import AuthButton from '@/components/AuthButton';
import withActions from '@/components/ActionList';
import EditIcon from '@/components/EditIcon';
import Navigate from '@/components/Navigate';
import SelectCity from '@/components/SelectButton/CitySelect';
import BuildSelect from '@/components/SelectButton/BuildSelect';
import apis from '@/services/apis';
import request from '@/utils/request';
import QueryTable from '@/components/QueryTable';

const LookHouseActivity = props => {
  const ref = useRef();

  const searchFields = [
    {
      name: 'cityId',
      label: '城市',
      placeholder: '请选择城市',
      render: () => <SelectCity style={{ width: 160 }} />,
    },
    {
      name: 'buildingId',
      label: '项目',
      placeholder: '请选择项目',
      render: () => <BuildSelect style={{ width: 160 }} />,
    },

    {
      name: 'title',
      label: '标题',
      placeholder: '请输入标题',
    },
    {
      name: 'time',
      label: '时间',
      placeholder: '请选择时间',
      type: 'datepicker',
    },
  ];

  const toLookHouseActivityDetail = dynamicId => () => {
    router.push({
      pathname: '/activity/lookHouseActivity/detail',
      query: {
        dynamicId,
      },
    });
  };

  // 跳转到编辑
  const toLookHouseActivityEdit = dynamicId => {
    router.push({
      pathname: '/activity/lookHouseActivity/edit',
      query: {
        dynamicId,
      },
    });
  };

  //   置顶
  const topDynamic = row => () => {
    const weight = Math.abs(row.weight - 1);
    request({ ...apis.activity.weight, params: { dynamicId: row.dynamicId, weight } })
      .then(data => {
        message.info('操作成功！');
        ref.current.reload();
      })
      .catch(err => {
        console.log(err);
        message.info(err.msg || err.message);
      });
  };

  //   推首页
  const homeDynamic = row => () => {
    const home = Math.abs(row.home - 1);
    request({ ...apis.activity.home, params: { dynamicId: row.dynamicId, home } })
      .then(data => {
        message.info('操作成功！');
        ref.current.reload();
      })
      .catch(err => {
        console.log(err);
        message.info(err.msg || err.message);
      });
  };

  //结束活动
  const finishDynamic = row => {
    Modal.confirm({
      title:
        '活动会被强制结束，小程序端无法再发起或参与此活动，如果不想让客户看到活动，请再点击取消发布按钮',
      okText: '确定',
      cancelText: '取消',
      onOk() {
        request({ ...apis.activity.finish, data: { dynamicId: row.dynamicId, top: '' } })
          .then(data => {
            message.info('操作成功！');
            ref.current.reload();
          })
          .catch(err => {
            console.log(err);
            message.info(err.msg || err.message);
          });
      },
    });
  };

  // 发布活动
  const sendDynamic = row => {
    Modal.confirm({
      title: '确定发布吗？',
      okText: '确认',
      cancelText: '取消',
      onOk() {
        request({ ...apis.activity.send, urlData: { id: row.dynamicId } })
          .then(data => {
            message.info('操作成功！');
            ref.current.reload();
          })
          .catch(err => {
            console.log(err);
            message.info(err.msg || err.message);
          });
      },
    });
  };

  // 取消活动
  const cancelDynamic = row => {
    Modal.confirm({
      title: '活动会在小程序端隐藏，后台可以继续编辑重新发布',
      okText: '确认',
      cancelText: '取消',
      onOk() {
        request({ ...apis.activity.cancel, urlData: { id: row.dynamicId } })
          .then(data => {
            message.info('操作成功！');
            ref.current.reload();
          })
          .catch(err => {
            console.log(err);
            message.info(err.msg || err.message);
          });
      },
    });
  };

  //   发布or取消发布
  const sendOrPublicDynamic = row => {
    if (row.status === 1) {
      cancelDynamic(row);
    } else {
      sendDynamic(row);
    }
  };

  const getJoinPeople = dynamicId => () => {
    router.push({
      pathname: '/activity/lookHouseActivity/registrationRecord',
      query: {
        dynamicId,
      },
    });
  };

  const columns = [
    {
      title: '活动标题',
      dataIndex: 'title',
      key: 'title',
      align: 'center',
      width: '20%',
      render: (x, row) => (
        <Navigate onClick={toLookHouseActivityDetail(row.dynamicId)}>
          <Typography.Text ellipsis>{row.title}</Typography.Text>
        </Navigate>
      ),
    },
    {
      title: '活动时间',
      dataIndex: 'startDate',
      key: 'startDate',
      align: 'center',
      width: '15%',
      // width: '20%',
      render: (x, row) => (
        <>
          <span>{`${moment(row.startDate).format('YYYY-MM-DD')} —— ${moment(row.endDate).format(
            'YYYY-MM-DD',
          )}`}</span>
        </>
      ),
    },
    {
      title: '已参与人数',
      dataIndex: 'count',
      key: 'count',
      align: 'center',
      render: (x, row) => <Navigate onClick={getJoinPeople(row.dynamicId)}>{row.count}</Navigate>,
    },
    // {
    //   title: '阅读量',
    //   dataIndex: 'pvNum',
    //   key: 'pvNum',
    //   align: 'center',
    //   // width: '10%',
    // },
    // {
    //   title: '转发量',
    //   dataIndex: 'shareNum',
    //   key: 'shareNum',
    //   align: 'center',
    //   // width: '10%',
    // },
    // {
    //   title: '收藏数',
    //   dataIndex: 'saveNum',
    //   key: 'saveNum',
    //   align: 'center',
    //   // width: '10%',
    // },
    {
      title: '报名状态',
      dataIndex: 'activityStatus',
      key: 'activityStatus',
      align: 'center',
      render: activityStatus =>
        activityStatus == 0 ? '进行中' : activityStatus == 1 ? '未开始' : '已结束',
    },
    {
      title: '权重',
      dataIndex: 'heavy',
      key: 'heavy',
      align: 'center',
    },
    {
      title: '操作',
      dataIndex: 'handle',
      key: 'handle',
      align: 'center',
      render: withActions((x, row) => [
        <AuthButton name="admin.buildingDynamic.send.dynamicId.put" noRight={null}>
          <EditIcon
            type={row.status === 1 ? 'cancel' : 'publish'}
            text={row.status === 1 ? '取消发布' : '发布'}
            onClick={() => sendOrPublicDynamic(row)}
          />
        </AuthButton>,

        // //   <EditIcon type="look" text="查看详情" onClick={toLookHouseActivityDetail(row.dynamicId)} />,

        row.activityStatus === 0 ? (
          <AuthButton name="admin.buildingDynamic.finish.put" noRight={null}>
            <EditIcon type="end" text="结束活动" onClick={finishDynamic.bind(this, row)} />
          </AuthButton>
        ) : null,

        <AuthButton name="admin.buildingDynamic.tag" noRight={null}>
          <EditIcon
            type={row.weight === 1 ? 'cancel' : 'add'}
            text={row.weight === 1 ? '取消标签' : '添加标签'}
            onClick={topDynamic(row)}
          />
        </AuthButton>,

        <EditIcon
          type={row.home === 1 ? 'cancel' : 'top'}
          text={row.home === 1 ? '取消推首页' : '推荐首页'}
          onClick={homeDynamic(row)}
        />,

        //   <AuthButton name="admin.buildingDynamic.dataRecord" noRight={null}>
        //     <EditIcon type="record" text="数据记录" onClick={toDataReacord(row.dynamicId)} />
        //   </AuthButton>,

        row.activityStatus === 0 || row.activityStatus === 1 ? (
          <AuthButton name="admin.buildingDynamic.update.put" noRight={null}>
            <EditIcon
              type="edit"
              text="编辑"
              onClick={() => toLookHouseActivityEdit(row.dynamicId, row.count)}
            />
          </AuthButton>
        ) : null,
      ]),
    },
  ];

  const actionRender = () => {
    return (
      <Button type="primary" icon="plus" onClick={() => toLookHouseActivityEdit()}>
        新增
      </Button>
    );
  };

  return (
    <QueryTable
      ref={ref}
      rowKey="dynamicId"
      api={apis.activity.list}
      searchFields={searchFields}
      columns={columns}
      postData={data => {
        data.time && (data.time = `${moment(data.time).format('YYYY-MM-DDT00:00:00.000')}Z`);
        return data;
      }}
      actionRender={actionRender}
      // onPageChange={(pg) => setPage(pg)}
    />
  );
};

export default LookHouseActivity;