feats

config/routes.js

@@ -176,6 +176,11 @@ export default [
                 component: './property/ticket/Detail',
                 hideInMenu: true,
               },
+              {
+                path: 'contact',
+                name: '联系方式',
+                component: './property/contact'
+              },
             ]
           },
           {

src/pages/property/contact/components/Editor.jsx

@@ -0,0 +1,77 @@
+import React, { useEffect, useState } from 'react'
+import { Form, Modal, Button, Input, InputNumber } from 'antd'
+
+const formItemLayout = {
+  labelCol: {
+    xs: { span: 24 },
+    sm: { span: 6 },
+  },
+  wrapperCol: {
+    xs: { span: 24 },
+    sm: { span: 12 },
+  },
+}
+
+const tailFormItemLayout = {
+  wrapperCol: {
+    xs: {
+      span: 24,
+      offset: 0,
+    },
+    sm: {
+      span: 16,
+      offset: 6,
+    },
+  },
+}
+
+export default Form.create()(props => {
+
+  const handleSubmit = e => {
+    e.preventDefault()
+    props.form.validateFields((err, values) => {
+      if (!err) {
+        props.onSubmit({
+          ...(props.dataSource || {}),
+          ...values
+        })
+      }
+    })
+  }
+
+  useEffect(() => {
+    if (props.visible) {
+      props.form.setFieldsValue(props.dataSource || {})
+    }
+  }, [props.dataSource, props.visible])
+
+  return (
+    <Modal  footer={null} maskClosable={false} onCancel={props.onCancel} visible={props.visible}>
+      <Form onSubmit={handleSubmit} {...formItemLayout}>
+        <Form.Item label="名称">
+          {
+            props.form.getFieldDecorator('name', {
+              rules: [{required: true, message: '请填写名称'}]
+            })(<Input placeholder="请填写名称" />)
+          }
+        </Form.Item>
+        <Form.Item label="电话">
+          {
+            props.form.getFieldDecorator('tel', {
+              rules: [{required: true, message: '请填写电话'}]
+            })(<Input placeholder="请填写电话" />)
+          }
+        </Form.Item>
+        <Form.Item label="备注">
+          {
+            props.form.getFieldDecorator('remark')(<Input placeholder="请填写备注" />)
+          }
+        </Form.Item>
+        <Form.Item {...tailFormItemLayout}>
+          <Button type="primary" htmlType="submit">确定</Button>
+          <Button onClick={props.onCancel} style={{ marginLeft: '48px' }}>取消</Button>
+        </Form.Item>
+      </Form>
+    </Modal>
+  )
+})

src/pages/property/contact/index.jsx

@@ -0,0 +1,131 @@
+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="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>
+  )
+}

src/services/announcement_api.js

@@ -37,5 +37,30 @@ export default prefix => {
       action: 'admin.announcement.delete'
     },
 
+    // 联系方式
+    getTelList: {
+      url: `${prefix}/announcement-tels`,
+      method: 'get',
+      action: 'admin.announcement-tel.get'
+    },
+
+    saveTel: {
+      url: `${prefix}/announcement-tel/add`,
+      method: 'post',
+      action: 'admin.announcement-tel.post'
+    },
+
+    updateTel: {
+      url: `${prefix}/announcement-tel/update`,
+      method: 'put',
+      action: 'admin.announcement-tel.put'
+    },
+
+    deleteTel: {
+      url: `${prefix}/announcement-tel/delete`,
+      method: 'post',
+      action: 'admin.announcement-tel.delete'
+    },
+
   }
 }