estateagents-admin-manager/src/pages/building/list/add/components/imageSet.jsx

import React, { useState, useEffect } from 'react';
import { Form, Icon, Input, Button, DatePicker, Select, Card, Row, Col, Pagination, Alert, Radio, Tag, Tooltip, Tabs, Table, notification } from 'antd';
import moment from 'moment';
import request from '../../../../../utils/request';
import apis from '../../../../../services/apis';
import Styles from '../style.less';
import { router } from 'umi';
import ModalImage from './modalImage';


const saleType = [
  {
    id: 1,
    name: '待定',
  },
  {
    id: 2,
    name: '售罄',
  },
  {
    id: 3,
    name: '在售',
  },
]

/**
 *图片设置
 *
 * @param {*} props
 * @returns
 */
function imageSet(props) {
  // eslint-disable-next-line react-hooks/rules-of-hooks
  const [data, setData] = useState([])

  // eslint-disable-next-line react-hooks/rules-of-hooks
  const [visibleData, setVisibleData] = useState({ visible: false, apartmentId: '', buildingId: '' })

  // eslint-disable-next-line react-hooks/rules-of-hooks
  useEffect(() => {
    getList()
  }, [])

  function openNotificationWithIcon(type, message) {
    notification[type]({
      message,
      description:
        '',
    });
  }

  function getList(params) {
    // 网路请求
    request({ ...apis.building.buildingApartment, urlData: { id: props.building.buildingId }, params: { ...params } }).then(res => {
      setData(res)
    }).catch(err => {
      openNotificationWithIcon('error', err.message)
    })
  }

  /**
   *回调事件
   *
   */
  function onModalChange() {
    getList()
    setVisibleData({ visible: false, apartmentId: '', buildingId: '' })
  }

  /**
   *打开编辑页
   *
   * @param {*} record
   */
  function showEdi(record) {
    setVisibleData({ visible: true, apartmentId: record === undefined ? '' : record.apartmentId, buildingId: props.building.buildingId })
  }

  /**
   * 删除
   *
   * @param {*} record
   */
  function deleteApartment(record) {
    // 网路请求
    request({ ...apis.building.buildingApartmentDelete, urlData: { id: record.apartmentId } }).then(res => {
      getList()
      openNotificationWithIcon('error', '操作成功')
    }).catch(err => {
      openNotificationWithIcon('error', err.message)
    })
  }


  const columns = [
    {
      title: '名称',
      dataIndex: 'apartmentName',
      key: 'apartmentName',
    },
    {
      title: '类型',
      dataIndex: 'apartmentType',
      key: 'apartmentType',
      render: (_, record) => <span>{ record.apartmentType === 'apart' ? '户型' : '相册' }</span>,
    },
    {
      title: '销售状态',
      dataIndex: 'marketStatus',
      key: 'marketStatus',
      render: (_, record) => <span>{ (saleType.filter(x => x.id == record.marketStatus)[0] || {}).name }</span>,
    },
    {
      title: '备注',
      dataIndex: 'remark',
      key: 'remark',
    },
    {
      title: '创建时间',
      dataIndex: 'createDate',
      key: 'createDate',
      render: (_, record) => <span>{ moment(record.createDate).format('YYYY-MM-DD') }</span>,
    },
    {
      title: '操作',
      dataIndex: 'apartmentId',
      key: 'apartmentId',
      render: (_, record) => (
        <>
          <Button type="link" style={{ color: 'red' }} onClick={() => showEdi(record)}>编辑</Button>
          <Button type="link" style={{ color: 'red' }} onClick={() => deleteApartment(record)}>删除</Button>
        </>
      ),
    },
  ]

  return (
    <>
      <Button type="primary" onClick={() => showEdi()}>新增图片库</Button>
      <Table dataSource={data} columns={columns} pagination={false} />

      {/* 编辑页 */}
      {/*  onSuccess是子组件传递事件信息  */}
      <ModalImage visibleData={visibleData} key={1} onSuccess={() => onModalChange()}/>
    </>
  )
}

export default imageSet