estateagents-admin-manager/src/pages/system/housingPolicy.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'

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

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

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

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

  
// 跳转到编辑商品
const toEditPolicy = (policyId) => () => {
    router.push({
      pathname: '/system/editPolicy',
      query: {
        policyId
      },
    });
  }
  
  /**
   *
   *
   * @param {*} props
   * @returns
   */
  
  const columns = [
    {
      title: '购房政策主图',
      dataIndex: 'policyImg',
      key: 'policyImg',
      align: 'center',
      render: (policyImg) => <img src={policyImg} className={styles.touxiang} />,
    },
    {
      title: '标题',
      dataIndex: 'title',
      key: 'title',
      align: 'center',
    },
    {
      title: '城市',
      dataIndex: 'cityName',
      key: 'cityName',
      align: 'center',
    },
    {
      title: '创建时间',
      dataIndex: 'createDate',
      key: 'createDate',
      align: 'center',
      render: (createDate) => <><span>{moment(createDate).format('YYYY-MM-DD')}</span></>
    },
    {
      title: '状态',
      dataIndex: 'publishStatus',
      key: 'publishStatus',
      align: 'center',
      render: (publishStatus)=> <><span>{publishStatus === 1 ? '已发布' : '未发布' }</span></>
    },
    {
      title: '操作',
      dataIndex: 'handle',
      key: 'handle',
      align: 'center',
      render: (x,row) => <>
                           <span style={{ color: '#1990FF' }} onClick={publicOrNoPublic(row)}>{ row.publishStatus === 0 ? '发布' : '取消发布' }<Icon type="close-circle" className={styles.edit} /></span>
                           <span style={{ color: '#1990FF', marginRight: '20px' }} onClick={topPolicy(row)}>{ row.weight === 1 ? '取消置顶' : '置顶' }<Icon type="vertical-align-top" className={styles.edit} /></span>
                           <span style={{ color: '#FF925C' }} onClick={toEditPolicy(row.policyId)}>编辑<Icon type="form" className={styles.edit} /></span>
                           <span style={{ color: '#FF925C' }} onClick={deletePolicy(row.policyId)}>删除<Icon type="form" className={styles.edit} /></span>
                         </>
    },
  ];
  
  // 删除
const deletePolicy = (policyId) => () => {
  Modal.confirm({
    title: '是否继续删除此政策?',
    okText: '确定',
    cancelText: '取消',
    onOk() {
        request({ ...apis.system.deleteTaPolicy, urlData: {id: policyId }, }).then((data) => {
            message.info('操作成功！')
            getList({ pageNum: 1, pageSize: 10,cityId: '' });
        }).catch((err) => {
            console.log(err)
            message.info(err.msg || err.message)
        })
    },
  });
}


//   置顶
  const topPolicy = (row) => () => {
      const weight = Math.abs(row.weight - 1)
      row.weight = weight
      request({ ...apis.system.updateTaPolicy, urlData: {id: row.policyId},data: row, }).then((data) => {
          console.log(data)
          message.info('操作成功！')
          getList({ pageNum: 1, pageSize: 10,cityId: '' });
      }).catch((err) => {
          console.log(err)
          message.info(err.msg || err.message)
      })
  }
  
  const publicOrNoPublic = (row) => () => {
      if (row.publishStatus === 1) {
        row.publishStatus = 0
      } else {
        row.publishStatus = 1
      }

      request({ ...apis.system.updateTaPolicy, urlData: {id: row.policyId},data: row, }).then((data) => {
          console.log(data)
          message.info('操作成功！')
          getList({ pageNum: 1, pageSize: 10,cityId: '' });
      }).catch((err) => {
          console.log(err)
          message.info(err.msg || err.message)
      })
  }
  
  const changePageNum = (pageNumber) => {
      getList({ pageNum: pageNumber, pageSize: 10 })
  }

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

  const { getFieldDecorator } = props.form
  return (

    <>
      <Form layout="inline" onSubmit={e => handleSubmit(e, props)}>
        <Form.Item>
          {getFieldDecorator('cityId')(
            <SelectCity />,
          )}
        </Form.Item>
        <Form.Item>
          <Button type="primary" htmlType="submit" className={styles.searchBtn}>
            搜索
          </Button>
        </Form.Item>
      </Form>
      <Button type="primary" className={styles.addBtn} onClick={toEditPolicy()}>新增</Button>
      <Table dataSource={data.records} columns={columns} pagination={false}/>
      <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