feats

src/components/ActionList/index.jsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import { Menu, Dropdown, Icon } from 'antd';
+
+import './style.less';
+
+export default function withActions(actionsRender, options = {}) {
+  return function ActionList(text, record) {
+    const actions = actionsRender(text, record);
+    const [Act1, Act2, ...leftActs] = (actions || []).filter(Boolean);
+    const showMore = leftActs && leftActs.length > 0;
+
+    const act2Style = options.noMargin ? { marginLeft: 0 } : {}
+
+    const menus = (
+      <Menu className="actlist-menu">
+        {[Act2].concat(leftActs).filter(Boolean).map((Act, index) => (<Menu.Item key={`dm-${index}`}>{Act}</Menu.Item>))}
+      </Menu>
+    );
+
+    return (
+      <div className="action-list">
+        {
+          Act1 && <span>{Act1}</span>
+        }
+        {
+          !showMore && Act2 && <span style={act2Style}>{Act2}</span>
+        }
+        {
+          showMore ?
+          (
+            <span>
+              <Dropdown overlay={menus} trigger={['click']}>
+                <a onClick={e => e.preventDefault()}>
+                  <span>更多</span> <Icon type="down" />
+                </a>
+              </Dropdown>
+            </span>
+          ) : null
+        }
+      </div>
+    );
+  }
+}

src/components/ActionList/style.less

@@ -0,0 +1,29 @@
+
+:global{
+  .action-list {  
+    span {
+      display: inline-block;
+      & + span {
+        margin-left: 16px;
+      }
+  
+      a {
+        color: #666;
+  
+        span {
+          color: #FF4A4A;
+        }
+      }
+    }
+  }
+  
+  .actlist-menu {
+    .ant-dropdown-menu-item {
+      color: #666 !important;
+
+      &:hover {
+        background-color: rgba(0,0,0, .1);
+      }
+    }
+  }
+}

src/components/AuthButton/index.jsx

@@ -0,0 +1,23 @@
+import React from 'react';
+
+let allBtns = [];
+let current = [];
+
+const AuthButton = ({ children, name, noRight }) => {
+  const btn = allBtns.filter(x => x.code === name)[0]
+  if (!btn) {
+    return <>{children}</>
+  }
+
+  const hasRight = current.filter(x => x.code === name)[0]  
+  return hasRight ? <>{children}</> : <>{noRight}</>
+}
+
+const setAllBtnAuth = x => allBtns = x;
+const setUserBtnAuth = x => current = x;
+
+export default AuthButton;
+export {
+  setAllBtnAuth,
+  setUserBtnAuth,
+};

src/components/OperButton/index.jsx

@@ -0,0 +1,30 @@
+import { Button, Modal } from 'antd'
+import { useState } from 'react'
+
+const OperButton = (props) => <Button type="link" size="small" {...props} >{props.children}</Button>
+
+const ConfirmButton = (props) => {
+  const { onClick, color = 'red', title, content, children, ...leftProps } = props
+
+  const handleClick = () => {
+    Modal.confirm({
+      title,
+      content,
+      onOk: onClick,
+    })
+  }
+  
+  return (
+    <Button
+      type="link"
+      size="small"
+      style={{ color }}
+      {...leftProps}
+      onClick={handleClick}
+    >{children}</Button>
+  )
+}
+
+OperButton.Confirm = ConfirmButton
+
+export default OperButton

src/components/Search/Field.jsx

@@ -0,0 +1,34 @@
+import React from 'react'
+import { Input, Select, DatePicker } from 'antd'
+
+const Option = Select.Option
+const { RangePicker } = DatePicker
+
+export default (props) => {
+  const { style, type, value, options = [], placeholder, onChange } = props
+
+  const handleChange = (e) => {
+    const isInput = !type || type === 'text' || type === 'input'
+    onChange(isInput ? e.target.value : e)
+  }
+
+  switch (type) {
+    case 'datepicker':
+    case 'rangepicker':
+      return (
+        <RangePicker value={value} placeholder={placeholder} onChange={handleChange} />
+      )
+    case 'select':
+      return (
+        <Select style={style || {width: 120}} placeholder={placeholder} value={value} onChange={handleChange}>
+          {
+            options.map((item) => <Option key={item.value} value={item.value}>{item.label}</Option>)
+          }
+        </Select>
+      )
+    case 'text':
+    case 'input':
+    default:
+      return <Input style={style} value={value} placeholder={placeholder} onChange={handleChange} />
+  }
+}

src/components/Search/SearchForm.jsx

@@ -0,0 +1,53 @@
+import React, { useRef, useState } from 'react'
+import { Form, Input, Button, Radio } from 'antd'
+import SearchItem from './SearchItem'
+import { defaultLayout, getFormDataFrom } from './utils'
+
+export default (props) => {
+  const { fields = [], extraParams = {}, onSearch, onReset } = props
+  const initValue = useRef(getFormDataFrom(fields))
+  const [formData, setFormData] = useState(initValue.current)
+
+  const handleChange = (data) => {
+    setFormData({
+      ...formData,
+      ...data,
+    })
+  }
+
+  const handleSubmit = () => {
+    onSearch({
+      ...formData,
+      ...extraParams,
+    })
+  }
+
+  const handleReset = () => {
+    setFormData(initValue.current)
+    onReset({
+      ...initValue.current,
+      ...extraParams,
+    })
+  }
+
+  return (
+    <Form layout="inline">
+      {
+        fields.map((field) => (
+          <SearchItem
+            key={field.name}
+            config={field}
+            label={field.label}
+            name={field.name}
+            value={formData[field.name]}
+            onChange={handleChange}
+          />
+        ))
+      }
+      <Form.Item>
+        <Button type="primary" onClick={handleSubmit}>搜索</Button>
+        <Button onClick={handleReset} style={{marginLeft: '1em'}}>重置</Button>
+      </Form.Item>
+    </Form>
+  )
+}

src/components/Search/SearchItem.jsx

@@ -0,0 +1,26 @@
+import React, { useCallback } from 'react'
+import { Form } from 'antd'
+import Field from './Field'
+
+export default (props) => {
+  const { label, name, value, config } = props
+
+  const fieldProps = {
+    value,
+    ...config,
+  }
+
+  const handleChange = useCallback((data) => {
+    props.onChange({[name]: data})
+  }, [name, props.onChange])
+
+  return (
+    <Form.Item label={label}>
+      <Field
+        {...fieldProps}
+        value={value}
+        onChange={handleChange}
+      />
+    </Form.Item>
+  )
+}

src/components/Search/index.jsx

@@ -0,0 +1,19 @@
+import SearchForm from './SearchForm'
+
+export { SearchForm }
+
+export default (props) => {
+  const style = {
+    boxSizing: 'border-box',
+    background: '#fff',
+    boxShadow: '0 1px 4px rgba(0, 21, 41, 0.08)',
+    padding: '1em',
+    marginBottom: '1.6em',
+  }
+
+  return (
+    <div style={style}>
+      <SearchForm {...props} />
+    </div>
+  )
+}

src/components/Search/utils.js

@@ -0,0 +1,10 @@
+
+export const getFormDataFrom = (fields = []) => {
+  return fields.reduce((data, field) => {
+    const { name, value } = field
+    return {
+      ...data,
+      [name]: value
+    }
+  }, [])
+}

src/components/TableList/Pagination.jsx

@@ -0,0 +1,40 @@
+import React from 'react'
+import { Pagination } from 'antd'
+import classNames from 'classnames'
+import Styles from './style.less'
+
+export default (props) => {
+  const { current, pageSize, total, onChange } = props
+
+  const style = {
+    marginTop: '1em',
+    background: 'transparent',
+  }
+
+  const handleChange = (current) => {
+    onChange(current)
+  }
+
+  const handleShowSizeChange = (current, pageSize) => {
+    onChange(current, pageSize)
+  }
+
+  if (!total || total < 1) {
+    return null
+  }
+
+  return (
+    <div className={classNames(Styles['flex-right'])} style={style}>
+      <div className={Styles['flex-right-item']}>
+        <Pagination
+          showSizeChanger
+          current={current}
+          pageSize={pageSize}
+          total={total}
+          onChange={handleChange}
+          onShowSizeChange={handleShowSizeChange}
+        />
+      </div>
+    </div>
+  )
+}

src/components/TableList/TableList.jsx

@@ -0,0 +1,31 @@
+import React from 'react'
+import { Table } from 'antd'
+import Styles from './style.less'
+
+const Actions = (props) => {
+  const style = {
+    marginBottom: '1em'
+  }
+
+  return (
+    <div className={Styles['flex-right']} style={style}>
+      <div className={Styles['flex-right-item']}>{props.children}</div>
+    </div>
+  )
+}
+
+export default (props) => {
+  const { actions, ...leftProps } = props
+
+  const tableProps = {
+    ...leftProps,
+    pagination: false,
+  }
+  
+  return (
+    <div className={Styles['box-wrapper']}>
+      {actions && <Actions>{actions}</Actions>}
+      <Table {...tableProps} />
+    </div>
+  )
+}

src/components/TableList/index.jsx

@@ -0,0 +1,52 @@
+import { useCallback, useState, useEffect } from 'react';
+import { stringify } from 'querystring';
+import { notification } from 'antd';
+import request from '@/utils/request'
+import TableList from './TableList';
+import Pagination from './Pagination';
+
+export default (props) => {
+  const [loading, setLoading] = useState(false)
+  const [pageConfig, setPageConfig] = useState({ current: 1, pageSize: 10, total: 0 })
+  const [list, setList] = useState()
+  const { api, params = {}, ...tableProps } = props
+  const paramsStr = stringify({
+    ...params,
+    pageNum: pageConfig.current,
+    pageSize: pageConfig.pageSize,
+  })
+
+  const updatePageConfig = useCallback((config) => {
+    setPageConfig({
+      ...pageConfig,
+      ...config
+    })
+  }, [pageConfig])
+
+  const handlePageChange = (current, pageSize) => {
+    const config = pageSize ? { current, pageSize } : { current }
+    updatePageConfig(config)
+  }
+
+  useEffect(() => {
+    const url = `${api.url}?${paramsStr}`
+    setLoading(true)
+    request({...api, url}).then((res) => {
+      const {current, total, records = []} = res
+      setLoading(false)
+      setList(records)
+      updatePageConfig({current, total})
+    }).catch((err) => {
+      console.error(err)
+      setLoading(false)
+      notification.warn({ message: err.message })
+    })
+  }, [paramsStr, api])
+
+  return (
+    <>
+      <TableList loading={loading} dataSource={list} {...tableProps} />
+      <Pagination {...pageConfig} onChange={handlePageChange} />
+    </>
+  )
+};

src/components/TableList/style.less

@@ -0,0 +1,15 @@
+
+.box-wrapper {
+  box-sizing: border-box;
+  background: #fff;
+  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
+}
+
+.flex-right {
+  display: flex;
+  flex-direction: row-reverse;
+
+  &-item {
+    flex: none;
+  }
+}

src/models/user.js

@@ -1,6 +1,6 @@
 import { fetch, apis } from '@/utils/request';
 import { setAuthority } from '@/utils/authority'
-// import { setAllBtnAuth, setUserBtnAuth } from '@/components/AuthButton';
+import { setAllBtnAuth, setUserBtnAuth } from '@/components/AuthButton';
 
 const getCurrentUser = fetch(apis.user.current)
 
@@ -26,8 +26,8 @@ const UserModel = {
       const { taUser = {} , menuList = [], buttonList = [] } = payload || {}
       const currentUser = { ...taUser, roles: (taUser.roles || []).map(x => x.roleId) }
 
-      // setAllBtnAuth(buttonList)
-      // setUserBtnAuth(currentUser.buttons)
+      setAllBtnAuth(buttonList)
+      setUserBtnAuth(currentUser.buttons)
 
       setAuthority(currentUser.roles)
 

src/pages/building/List/components/Search.jsx

@@ -0,0 +1,48 @@
+import React from 'react'
+import Search from '@/components/Search'
+
+export default (props) => {
+  const searchFields = [
+    {
+      name: 'name',
+      label: '楼盘名称',
+      placeholder: '请输入楼盘名称',
+    },
+    {
+      name: 'buildingStatus',
+      label: '楼盘状态',
+      placeholder: '请选择楼盘状态',
+      type: 'select',
+      options: [
+        {label: '已发布', value: 1},
+        {label: '未发布', value: 2}
+      ]
+    },
+    {
+      name: 'buildingStatus',
+      label: '销售状态',
+      placeholder: '请选择销售状态',
+      type: 'select',
+      options: [
+        {label: '待售', value: '待售'},
+        {label: '在售', value: '在售'},
+        {label: '售罄', value: '售罄'},
+        {label: '在租', value: '在租'},
+      ]
+    },
+    {
+      name: 'isMain',
+      label: '首页推荐',
+      placeholder: '请选择首页推荐',
+      type: 'select',
+      options: [
+        {label: '推荐', value: 1},
+        {label: '未推荐', value: 2},
+      ]
+    },
+  ]
+
+  return (
+    <Search fields={searchFields} onSearch={props.onSearch} onReset={props.onSearch} />
+  )
+}

src/pages/building/List/components/Table.jsx

@@ -0,0 +1,100 @@
+import React, { useState } from 'react'
+import { router } from 'umi'
+import { Button, Badge } from 'antd'
+import moment from 'moment'
+import TableList from '@/components/TableList'
+import OperButton from '@/components/OperButton'
+import AuthButton from '@/components/AuthButton'
+import withActions from '@/components/ActionList'
+
+export default (props) => {
+  const [page, setPage] = useState({current: 1, pageSize: 10})
+  const { api, params, onDelete, onPublish } = props
+
+  const columns = [
+    {
+      title: '编号',
+      key: '#',
+      align: 'center',
+      render: (t, r, index) => (page.current - 1) * page.pageSize + index + 1,
+    },
+    {
+      title: '封面',
+      dataIndex: 'buildingListImg',
+      key: 'buildingListImg',
+      align: 'center',
+      render: (_, row) => {
+        if (row.buildingListImg && row.buildingListImg[0]) {
+          return <img src={row.buildingListImg[0].url} width={128} height={72} style={{borderRadius: '4px'}} alt="" />
+        }
+        return null
+      }
+    },
+    {
+      title: '楼盘名称',
+      dataIndex: 'buildingName',
+      key: 'buildingName',
+      align: 'center',
+      render: (t, row) => (
+        <AuthButton name="admin.building.update" noRight={t}>
+          <Button
+            type="link"
+            onClick={() => router.push({
+              pathname: '/building/list/add',
+              query: {
+                id: row.buildingId,
+              },
+            })}
+          >{t}</Button>
+        </AuthButton>
+      )
+    },
+    {
+      title: '销售状态',
+      dataIndex: 'marketStatus',
+      key: 'marketStatus',
+      align: 'center',
+    },
+    {
+      title: '录入时间',
+      dataIndex: 'createDate',
+      key: 'createDate',
+      align: 'center',
+      render: (t) => moment(t).format('YYYY-MM-DD HH:mm')
+    },
+    {
+      title: '状态',
+      dataIndex: 'status',
+      key: 'status',
+      align: 'center',
+      render: (t) => t === 1 ? <Badge status="success" text="已发布" /> : <Badge status="processing" text="未发布" />
+    },
+    {
+      title: '操作',
+      key: 'options',
+      align: 'center',
+      render: withActions((_, row) => [
+        <AuthButton name="admin.building.public" noRight={null}>
+          <OperButton onClick={() => onPublish(row)}>{row.status === 1 ? '取消发布' : '发布'}</OperButton>
+        </AuthButton>,
+        <AuthButton name="admin.building.delete" noRight={null}>
+          <OperButton.Confirm
+            title="确认删除?"
+            content="删除之后不可恢复"
+            onClick={() => onDelete(row)}
+          >删除</OperButton.Confirm>
+        </AuthButton>
+      ], {noMargin: true})
+    },
+  ]
+
+  return (
+    <TableList
+      api={api}
+      params={params}
+      rowKey="buildingId"
+      columns={columns}
+      onPageChange={(pg) => setPage(pg)}
+    />
+  )
+}

src/pages/building/List/index.jsx

@@ -1,7 +1,28 @@
-import React from 'react'
+import React, { useState } from 'react'
+import apis from '@/services/apis'
+import Search from './components/Search'
+import Table from './components/Table'
 
 export default (props) => {
+  const [searchData, setSearchData] = useState({})
+
+  const handleDelete = (row) => {
+    //
+  }
+
+  const handlePublish = (row) => {
+
+  }
+
   return (
-    <div></div>
+    <div>
+      <Search onSearch={(data) => setSearchData(data)} />
+      <Table
+        api={apis.building.getList}
+        params={searchData}
+        onDelete={handleDelete}
+        onPublish={handlePublish}
+      />
+    </div>
   )
 }