xs-manage/src/pages/property/contact/index.jsx

import React, { useState, useEffect } from 'react'
import { Select, Spin, Table, Button, Form, Input, Divider, Typography, Popconfirm, notification } from 'antd'
import NavLink from 'umi/navlink'
import { fetchList, apis, fetch } from '@/utils/request'
import Search from '../components/Search'
import List from '../components/List'
import Editor from './components/Editor'

const listTel = fetch(apis.announcement.getTelList)
const deleteTel = fetch(apis.announcement.deleteTel)
const saveTel = fetch(apis.announcement.saveTel)
const updateTel = fetch(apis.announcement.updateTel)

const Condition = props => {
  return (
    <Search
      onSearch={props.onSearch}
      onReset={props.onReset}
      render={form => {
        const { getFieldDecorator, setFieldsValue } = form
        
        return (
          <>
            <Form.Item label="名称">
            {
              getFieldDecorator('name')(<Input placeholder="名称" />)
            }
            </Form.Item>
            <Form.Item label="电话">
            {
              getFieldDecorator('tel')(<Input placeholder="电话" />)
            }
            </Form.Item>
          </>
        )
      }}
    />
  )
}

export default props => {
  const [loading, setLoading] = useState(false)
  const [listData, setListData] = useState([])
  const [pagination, setPagination] = useState({})
  const [queryParams, setQueryParams] = useState({ pageNum: 1, pageSize: 10 })
  const [showEditor, setShowEditor] = useState(false)
  const [currentRow, setCurrentRow] = useState()

  const handleSearch = vals => {
    setQueryParams({
      ...queryParams,
      ...vals,
      pageNum: 1,
    })
  }

  const handlePageChange = (pageNum, pageSize) => {
    setQueryParams({
      ...queryParams,      
      pageNum,
      pageSize,
    })
  }

  const triggerShowEditor = row => {
    setShowEditor(!showEditor)
    setCurrentRow({...(row || {})})
  }

  const handleEditor = vals => {
    if (vals.id) {
      updateTel({data: vals}).then(res => {
        notification.success({message: '信息更新成功'})
        triggerShowEditor()
        setQueryParams({...queryParams})
      })
    } else {
      saveTel({data: vals}).then(res => {
        notification.success({message: '信息保存成功'})
        triggerShowEditor()
        setQueryParams({...queryParams})
      })
    }
  }

  const handleDeleteRow = row => {
    deleteTel({data: [row.id]}).then(res => {
      notification.success({ message: '删除成功' })
      setQueryParams({...queryParams})
    })
  }

  useEffect(() => {
    setLoading(true)
    listTel({params: queryParams}).then(res => {
      const {list, ...pagi} = res
      setListData(list)
      setPagination(pagi)
      setLoading(false)
    }).catch(e => setLoading(false))
  }, [queryParams])

  return (
    <div>
      <Condition onSearch={handleSearch} onReset={handleSearch} />
      <div style={{ margin: '24px 0' }}>
        <Button type="primary" onClick={() => triggerShowEditor()}>添加</Button>
      </div>
      <List dataSource={listData} loading={loading} pagination={pagination} onPageChange={handlePageChange} rowKey="id">
        <Table.Column title="名称" dataIndex="name" key="name" />
        <Table.Column title="电话" dataIndex="tel" key="tel" />
        <Table.Column title="物业类型" dataIndex="type" key="type" render={(item, row) => (
          <span>{item == "prop" ? "物业电话" : "公共服务电话"}</span>
        )}/>
        <Table.Column title="备注" dataIndex="remark" key="remark" />
        <Table.Column title="操作" dataIndex="id" key="id" width="200px" render={(_, row) => (
          <>
            <Popconfirm
              title="确认进行删除操作?"
              onConfirm={() => handleDeleteRow(row)}
              okText="删除"
              cancelText="取消"
            >
              <Button type="link">删除</Button>
            </Popconfirm>
            <Divider type="vertical" />
            <Button type="link" onClick={() => triggerShowEditor(row)}>编辑</Button>
          </>
        )} />
      </List>
      <Editor visible={showEditor} dataSource={currentRow} onSubmit={handleEditor} onCancel={triggerShowEditor} />
    </div>
  )
}