estateagents-admin-manager/src/pages/carouselFigure/carouselFigureList.jsx

import React, { useState, useEffect } from 'react';
import { Form, Input, Button, Icon, Select, message, Table, Divider, Tag, Pagination, Modal, DatePicker } from 'antd';
import { FormattedMessage } from 'umi-plugin-react/locale';
import styles from '../style/GoodsList.less';
import router from 'umi/router';
import moment from 'moment';
import SelectCity from '../../components/SelectButton/CitySelect'
import BuildSelect from '../../components/SelectButton/BuildSelect'
import apis from '../../services/apis';
import request from '../../utils/request';
import AuthButton from '@/components/AuthButton';

const { Option } = Select;
const { MonthPicker, RangePicker, WeekPicker } = DatePicker;

const header = (props) => {
  const [ data, setData ] = useState({})
//   const [page, changePage] = useState({})

  useEffect(() => {
    getList({ pageNum: 1, pageSize: 10, showType: 'banner' });
  },[])

  // 查询列表
  const getList = (params) => {
    request({ ...apis.carsuseFigure.extendContent, params: { ...params },}).then((data) => {
        console.log(data)
        setData(data)
    })
  }

  
// 跳转到编辑页面
const toEditCarouse = (contentId) => () => {
    router.push({
      pathname: '/carouselFigure/editCarousel',
      query: {
        contentId
      },
    });
  }
  
  const columns = [
    {
      title: '主图',
      dataIndex: 'image',
      key: 'image',
      align: 'center',
      render: (image) => <img src={image} className={styles.touxiang} />,
    },
    {
      title: '类型',
      dataIndex: 'contentType',
      key: 'contentType',
      align: 'center',
      render: (contentType) => <span>{ contentType === 'project' ? '项目' : contentType === 'activity' ? '活动' : contentType === 'news' ? '资讯' : contentType === 'other' ? '其他' : '' }</span>
    },
    {
      title: '发布位置',
      dataIndex: 'showPosition',
      key: 'showPosition',
      align: 'center',
      render: (showPosition) => <span>{ showPosition === 'index' ? '首页' : showPosition === 'mall' ? '商城' : '' }</span>
    },
    {
      title: '发布时间',
      dataIndex: 'createDate',
      key: 'createDate',
      align: 'center',
      render: (x, row) => <><span>{moment(row.createDate).format('YYYY-MM-DD')}</span></>
    },
    {
      title: '状态',
      dataIndex: 'status',
      key: 'status',
      align: 'center',
      render: (status)=> <><span>{status == 1 ? '启用' : '停用'}</span></>
    },
    {
      title: '操作',
      dataIndex: 'handle',
      key: 'handle',
      align: 'center',
      render: (x,row) => (
        <>
          <AuthButton name="admin.extendContent.id.put" noRight={null}>
            <span style={{ color: '#1990FF', marginRight: '20px' }} onClick={changeStatus(row)}>{ row.status === 1 ? '禁用' : '启用' }<Icon type="vertical-align-top" className={styles.edit} /></span>
            <span style={{ color: '#FF925C' }} onClick={toEditCarouse(row.contentId)}>编辑<Icon type="form" className={styles.edit} /></span>
          </AuthButton>
        </>
      )
    },
  ];
  
  const finishDynamic = (row) => {
      Modal.confirm({
          title: '结束以后将无法编辑, 是否继续?',
          okText: '确定',
          cancelText: '取消',
          onOk() {
            request({ ...apis.carsuseFigure.finish, data: {dynamicId: row.dynamicId, top: ""},}).then((data) => {
                  console.log(data)
                  message.info('操作成功！')
                  getList({ pageNum: 1, pageSize: 10, showType: 'banner' })
              }).catch((err) => {
                  console.log(err)
                  message.info(err.msg || err.message)
              })
          },
        });
  }
  
//   停用启用
  const changeStatus = (row) => () => {
      console.log(row)
      if(row.status === 0) {
        row.status = 1
        Modal.confirm({
          title: '确认发布此数据?',
          okText: '确定',
          cancelText: '取消',
          onOk() {
            request({ ...apis.carsuseFigure.updataExtendContent,urlData:{id: row.contentId}, data: row,}).then((data) => {
                  message.info('操作成功！')
                  getList({ pageNum: 1, pageSize: 10, showType: 'banner' })
              }).catch((err) => {
                  console.log(err)
                  message.info(err.msg || err.message)
              })
          },
        });
      }else if(row.status === 1){
        row.status = 0
        Modal.confirm({
          title: '确认停用此轮播图?',
          okText: '确定',
          cancelText: '取消',
          onOk() {
            request({ ...apis.carsuseFigure.updataExtendContent,urlData:{id: row.contentId}, data: row,}).then((data) => {
                  message.info('操作成功！')
                  getList({ pageNum: 1, pageSize: 10, showType: 'banner' })
              }).catch((err) => {
                  console.log(err)
                  message.info(err.msg || err.message)
              })
          },
        });
      }

  }
  
  const changePageNum = (pageNumber) => {
      getList({ pageNum: pageNumber, pageSize: 10, showType: 'banner' })
  }

  // 提交事件
const handleSubmit = (e, props) => {
    e.preventDefault();
    props.form.validateFields((err, values) => {
      if (!err) {
        console.log('提交数据: ', values)
        getList({ pageNum: 1, pageSize: 10, ...values, showType: 'banner' })
      }
    });
  }

   //重置搜索
   function handleReset() {
    props.form.resetFields();
  }

  const { getFieldDecorator } = props.form
  return (

    <>
      <Form layout="inline" onSubmit={e => handleSubmit(e, props)}>
        <Form.Item>
          {getFieldDecorator('buildingId')(
            <BuildSelect />,
          )}
        </Form.Item>
        <Form.Item>
          {getFieldDecorator('contentType')(
            <Select style={{ width: '180px' }} placeholder="类型">
              <Option value="activity">活动</Option>
              <Option value="project">项目</Option>
              <Option value="news">资讯</Option>
              <Option value="other">其他</Option>
            </Select>,
          )}
        </Form.Item>
        <Form.Item>
          {getFieldDecorator('showPosition')(
            <Select style={{ width: '180px' }} placeholder="发布位置">
              <Option value="mall">商城</Option>
              <Option value="index">首页</Option>
            </Select>,
          )}
        </Form.Item>
        <Form.Item>
          {getFieldDecorator('status')(
            <Select style={{ width: '180px' }} placeholder="状态">
              <Option value="1">启用</Option>
              <Option value="0">停用</Option>
            </Select>,
          )}
        </Form.Item>
        <Form.Item>
          <Button type="primary" htmlType="submit" className={styles.searchBtn}>
            搜索
          </Button>
          <Button style={{ marginLeft: 8 }} onClick={handleReset}>
              重置
            </Button>
        </Form.Item>
      </Form>
      <AuthButton name="admin.extendContent.post" noRight={null}>
        <Button type="danger" className={styles.addBtn} onClick={toEditCarouse()}>新增</Button>
      </AuthButton>
      <Table dataSource={data.records} columns={columns} pagination={false} rowKey="carouseFigureList"/>
      <div style={{ display: 'flex', justifyContent: 'flex-end', marginTop: '30px' }}>
        <Pagination showQuickJumper defaultCurrent={1} total={data.total} onChange={changePageNum} />
      </div>
    </>
  )
}
const WrappedHeader = Form.create({ name: 'header' })(header);

export default WrappedHeader