feats

config/routes.js

@@ -602,6 +602,17 @@ export default [
                 component: './property/notice/Edit',
                 hideInMenu: true,
               },
+              {
+                path: 'news',
+                name: '服务内容',
+                component: './property/news'
+              },
+              {
+                path: 'news/edit',
+                name: '服务内容详情',
+                component: './property/news/Edit',
+                hideInMenu: true,
+              },
               {
                 path: 'bill/management',
                 name: '收费组管理',

src/pages/property/news/Edit.jsx

@@ -0,0 +1,128 @@
+import React, { useEffect, useState } from 'react'
+import { Form, Input, Button, Radio, InputNumber, notification } from 'antd'
+import router from 'umi/router'
+import { fetch, apis } from '@/utils/request'
+import ImageUpload from '@/components/uploadImage/ImageUpload'
+import Wangedit from '@/components/Wangedit/Wangedit'
+
+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,
+    },
+  },
+}
+
+const getNewsDetail = fetch(apis.propNews.getNewsDetail)
+const addNews = fetch(apis.propNews.addNews)
+const updateNews = fetch(apis.propNews.updateNews)
+
+export default Form.create()(props => {
+  const [loading, setLoading] = useState(false)
+  const [newsData, setNewsData] = useState({})
+
+  const { id } = props.location.query
+  
+  const handleSubmit = e => {
+    e.preventDefault();
+    props.form.validateFields((err, values) => {
+      if (!err) {
+        setLoading(true)
+        if (id) {
+          updateNews({data: values, urlData: {id}}).then(res => {
+            notification.success({ message: "修改内容成功" })
+            setLoading(false)
+          }).catch(err => {
+            setLoading(false)
+          })
+        } else {
+          addNews({data: values}).then(res => {
+            notification.success({ message: "保存内容成功" })
+            setLoading(false)
+            router.go(-1)
+          }).catch(err => {
+            setLoading(false)
+          })
+        }
+      }
+    });
+  }
+
+  useEffect(() => {
+    if (id) {
+      getNewsDetail({urlData: {id}}).then(res => {
+        setNewsData(res)
+        props.form.setFieldsValue(res)
+      })
+    }
+  }, [id])
+  
+  return (
+    <div>
+      <Form {...formItemLayout} onSubmit={handleSubmit}>
+        <Form.Item label="标题">
+          {
+            props.form.getFieldDecorator('newsName', {
+              rules: [
+                { required: true, message: '请填写标题' },
+              ],
+            })(<Input placeholder="标题" />)
+          }
+        </Form.Item>
+        <Form.Item label="封面">
+          {
+            props.form.getFieldDecorator('newsImg', {
+              rules: [
+                { required: true, message: '请上传封面' },
+              ],
+            })(<ImageUpload />)
+          }
+        </Form.Item>
+        <Form.Item label="内容">
+          {
+            props.form.getFieldDecorator('newsDetail', {
+              rules: [
+                { required: true, message: '请填写内容' },
+              ],
+            })(<Wangedit />)
+          }
+        </Form.Item>
+        <Form.Item label="权重">
+          {
+            props.form.getFieldDecorator('weight')(<InputNumber min={1} />)
+          }
+        </Form.Item>
+        <Form.Item label="状态">
+          {
+            props.form.getFieldDecorator('status')(
+              <Radio.Group>
+                <Radio value={0}>未发布</Radio>
+                <Radio value={1}>已发布</Radio>
+              </Radio.Group>
+            )
+          }
+        </Form.Item>
+        <Form.Item {...tailFormItemLayout} >
+          <Button loading={loading} type="primary" htmlType="submit">提交</Button>
+          <Button style={{ marginLeft: '24px' }} onClick={() => router.go(-1)}>取消</Button>
+        </Form.Item>
+      </Form>
+    </div>
+  )
+})

src/pages/property/news/index.jsx

@@ -0,0 +1,166 @@
+import React, { useState, useEffect } from 'react'
+import { Select, Spin, Table, Button, Form, Input, Divider, Modal, Popconfirm, Typography, notification } from 'antd'
+import NavLink from 'umi/navlink'
+import { fetch, fetchList, apis } from '@/utils/request'
+import Search from '../components/Search'
+import List from '../components/List'
+
+const getNewsList = fetchList(apis.propNews.getNewsList)
+const updateNews = fetch(apis.propNews.updateNews)
+const deleteNews = fetch(apis.propNews.deleteNews)
+
+const Condition = props => {
+  return (
+    <Search
+      onSearch={props.onSearch}
+      onReset={props.onReset}
+      render={form => {
+        const { getFieldDecorator } = form
+        
+        return (
+          <>
+            <Form.Item label="标题">
+            {
+              getFieldDecorator('newsName')(<Input placeholder="标题" />)
+            }
+            </Form.Item>
+          </>
+        )
+      }}
+    />
+  )
+}
+
+const StatusDict = {
+  '0': '未发布',
+  '1': '已发布',
+}
+
+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 handleSearch = vals => {
+    setQueryParams({
+      ...queryParams,
+      ...vals,
+      pageNum: 1,
+    })
+  }
+
+  const handleDeleteRow = row => {
+    deleteNews({ urlData: {id: row.newsId} }).then(res => {
+      Modal.success({
+        content: '删除内容成功',
+        onOk: () => {
+          // 触发数据刷新
+          setQueryParams({...queryParams})
+        }
+      })
+    })
+  }
+
+  const handleStatusTrigger = row => {
+    // 发布 -> 取消发布
+    // 取消发布 -> 发布
+    const status = Math.abs(row.status - 1)
+    const data = { ...row, status }
+    updateNews({data, urlData: {id: row.newsId}}).then(res => {
+      notification.success({message: "操作成功"})
+      // 触发数据刷新
+      setQueryParams({...queryParams})
+    })
+  }
+
+  const handlePageChange = (pageNum, pageSize) => {
+    setQueryParams({
+      ...queryParams,      
+      pageNum,
+      pageSize,
+    })
+  }
+
+  useEffect(() => {
+    setLoading(true)
+    getNewsList(queryParams).then(res => {
+      const [list, pageInfo] = res || {}
+      setListData(list)
+      setPagination(pageInfo)
+      setLoading(false)
+    }).catch(() => setLoading(false))
+  }, [queryParams])
+
+  return (
+    <div>
+      <Condition onSearch={handleSearch} onReset={handleSearch} />
+      <div style={{ margin: '24px 0' }}>
+        <NavLink to={`/property/news/edit`}>
+          <Button type="primary">添加</Button>
+        </NavLink>
+      </div>
+      <List dataSource={listData} loading={loading} pagination={pagination} onPageChange={handlePageChange} rowKey="newsId">
+        <Table.Column title="#ID" dataIndex="newsId" key="newsId" />
+        <Table.Column
+          title="标题"
+          dataIndex="newsName"
+          key="newsName"
+          render={(_, row) => {
+            return (
+              <NavLink to={`/property/news/edit?id=${row.newsId}`}>
+                <Button type="link">{row.newsName}</Button>
+              </NavLink>
+            )
+          }}
+        />
+        <Table.Column title="封面" dataIndex="newsImg" key="newsImg" render={t => <img src={t} alt="" style={{ width: '96px', height: '96px' }} />} />
+        <Table.Column
+          title="内容"
+          dataIndex="newsDetail"
+          key="newsDetail"
+          render={t => <Typography.Text ellipsis>{(t||'').replace(/<[^>]*>|/g,"").substring(0, 20)}</Typography.Text>}
+        />
+        <Table.Column
+          title="状态"
+          dataIndex="status"
+          key="status"
+          render={(_, row) => StatusDict[row.status]}
+        />
+        <Table.Column title="创建时间" dataIndex="createDate" key="createDate" />
+        <Table.Column
+          title="操作"
+          key="action"
+          render={(_, row) => {
+            return (
+              <>
+                <Popconfirm
+                  title="确认进行删除操作?"
+                  onConfirm={() => handleDeleteRow(row)}
+                  okText="删除"
+                  cancelText="取消"
+                >
+                  <Button type="link">删除</Button>
+                </Popconfirm>
+                <Divider type="vertical" />
+                <Popconfirm
+                  title={`确认进行${row.status === 1? '取消发布' : '发布'}操作`}
+                  onConfirm={() => handleStatusTrigger(row)}
+                  okText={row.status === 1? '取消发布' : '发布'}
+                  cancelText="取消"
+                >
+                  <Button type="link">{row.status === 1? '取消发布' : '发布'}</Button>
+                </Popconfirm>
+                <Divider type="vertical" />
+                <NavLink to={`/property/news/edit?id=${row.newsId}`}>
+                  <Button type="link">编辑</Button>
+                </NavLink>
+              </>
+            )
+          }}
+        />
+      </List>
+
+    </div>
+  )
+}

src/services/apis.js

@@ -4,6 +4,7 @@ import buildingOwnerInfo from './buildingOwnerInfo_api'
 import propUser from './prop_user_api'
 import announcement from './announcement_api'
 import ticket from './ticket_api'
+import propNews from './prop_news_api'
 
 const prefix = `${APIBaseURL}api/admin`
 
@@ -17,6 +18,7 @@ export default {
   buildingOwnerInfo: buildingOwnerInfo(prefix),
   announcement: announcement(prefix),
   ticket: ticket(prefix),
+  propNews: propNews(prefix),
   image: {
     uploadForAnt: {
       url: `${prefix}/antd/image`,

src/services/prop_news_api.js

@@ -0,0 +1,41 @@
+
+const moduleName = 'property-news'
+
+export default prefix => {
+  return {
+    // 列表
+    getNewsList: {
+      url: `${prefix}/${moduleName}`,
+      method: 'get',
+      action: `admin.${moduleName}.list`
+    },
+
+    // 详情
+    getNewsDetail: {
+      url: `${prefix}/${moduleName}/:id`,
+      method: 'get',
+      action: `admin.${moduleName}.detail`
+    },
+
+    // 新增
+    addNews: {
+      url: `${prefix}/${moduleName}`,
+      method: 'post',
+      action: `admin.${moduleName}.add`
+    },
+
+    // 更新
+    updateNews: {
+      url: `${prefix}/${moduleName}/:id`,
+      method: 'put',
+      action: `admin.${moduleName}.update`
+    },
+
+    // 删除
+    deleteNews: {
+      url: `${prefix}/${moduleName}/id`,
+      method: 'delete',
+      action: `admin.${moduleName}.delete`
+    }
+  }
+}