添加类别功能

.umirc.js

@@ -72,7 +72,7 @@ export default {
   // Webpack Configuration
   proxy: {
     '/api/v1/': {
-      target: 'http://localhost',
+      target: 'http://localhost:8080',
       changeOrigin: true,
       pathRewrite: { '^/api/v1/': '' },
     }

src/models/app.js

@@ -24,15 +24,14 @@ export default {
         icon: 'laptop',
         name: '仪表盘',
         zhName: '仪表盘',
-        route: '/user',
+        route: '/folk/category',
       },
     ],
     locationPathname: '',
     locationQuery: {},
     theme: store.get('theme') || 'light',
     collapsed: store.get('collapsed') || false,
-    notifications: [
-    ],
+    notifications: [],
   },
   subscriptions: {
     setupHistory({ dispatch, history }) {
@@ -67,11 +66,15 @@ export default {
   },
   effects: {
     *query({ payload }, { call, put, select }) {
-      const { success, user,data:{menus} } = yield call(queryUserInfo, payload)
-
+      const {
+        success,
+        user,
+        data: { menus },
+      } = yield call(queryUserInfo, payload)
+
       const { locationPathname } = yield select(_ => _.app)
       if (success && menus) {
-        const { list } = menus;
+        const { list } = menus
         const { permissions } = {
           id: 0,
           username: 'admin',
@@ -81,9 +84,9 @@ export default {
         }
         // const { permissions } = user
         let routeList = menus
-        console.log(111111);
-        console.log(routeList);
-        
+        console.log(111111)
+        console.log(routeList)
+
         // if (
         //   permissions.role === ROLE_TYPE.ADMIN ||
         //   permissions.role === ROLE_TYPE.DEVELOPER
@@ -109,7 +112,7 @@ export default {
             routeList,
           },
         })
-        if (pathMatchRegexp(['/','/login'], window.location.pathname)) {
+        if (pathMatchRegexp(['/', '/login'], window.location.pathname)) {
           router.push({
             pathname: '/user',
           })
@@ -171,4 +174,4 @@ export default {
       state.notifications = []
     },
   },
-}
+}

src/pages/folk/category/components/Filter.js

@@ -0,0 +1,116 @@
+/* global document */
+import React, { PureComponent } from 'react'
+import PropTypes from 'prop-types'
+import { Trans, withI18n } from '@lingui/react'
+import { Form, Button, Row, Col, DatePicker, Input, Cascader } from 'antd'
+
+const { Search } = Input
+const { RangePicker } = DatePicker
+
+const ColProps = {
+  xs: 24,
+  sm: 12,
+  style: {
+    marginBottom: 16,
+  },
+}
+
+const TwoColProps = {
+  ...ColProps,
+  xl: 96,
+}
+
+@withI18n()
+@Form.create()
+class Filter extends PureComponent {
+  handleFields = fields => {
+    return fields
+  }
+
+  handleSubmit = () => {
+    const { onFilterChange, form } = this.props
+    const { getFieldsValue } = form
+
+    let fields = getFieldsValue()
+    fields = this.handleFields(fields)
+    fields = { param: fields }
+    onFilterChange(fields)
+  }
+
+  handleReset = () => {
+    const { form } = this.props
+    const { getFieldsValue, setFieldsValue } = form
+
+    const fields = getFieldsValue()
+    for (let item in fields) {
+      if ({}.hasOwnProperty.call(fields, item)) {
+        if (fields[item] instanceof Array) {
+          fields[item] = []
+        } else {
+          fields[item] = undefined
+        }
+      }
+    }
+    setFieldsValue(fields)
+    this.handleSubmit()
+  }
+  handleChange = (key, values) => {
+    const { form, onFilterChange } = this.props
+    const { getFieldsValue } = form
+
+    let fields = getFieldsValue()
+    fields[key] = values
+    fields = this.handleFields(fields)
+    onFilterChange(fields)
+  }
+
+  render() {
+    const { onAdd, filter, form, i18n } = this.props
+    const { getFieldDecorator } = form
+    const { name } = filter
+
+    return (
+      <Row gutter={24}>
+        <Col {...ColProps} xl={{ span: 4 }} md={{ span: 8 }}>
+          {getFieldDecorator('name', { initialValue: name })(
+            <Input placeholder={'搜索名称'} allowClear />
+          )}
+        </Col>
+        <Col
+          {...TwoColProps}
+          xl={{ span: 10 }}
+          md={{ span: 24 }}
+          sm={{ span: 24 }}
+        >
+          <Row type="flex" align="middle" justify="space-between">
+            <div>
+              <Button
+                type="primary"
+                className="margin-right"
+                icon="search"
+                onClick={this.handleSubmit}
+              >
+                <Trans>Search</Trans>
+              </Button>
+              <Button className="margin-right" onClick={this.handleReset}>
+                <Trans>Reset</Trans>
+              </Button>
+              <Button type="ghost" onClick={onAdd} icon="form">
+                <Trans>Create</Trans>
+              </Button>
+            </div>
+          </Row>
+        </Col>
+      </Row>
+    )
+  }
+}
+
+Filter.propTypes = {
+  onAdd: PropTypes.func,
+  form: PropTypes.object,
+  filter: PropTypes.object,
+  onFilterChange: PropTypes.func,
+}
+
+export default Filter

src/pages/folk/category/components/List.js

@@ -0,0 +1,108 @@
+import React, { PureComponent } from 'react'
+import PropTypes from 'prop-types'
+import { Table, Modal, Avatar, Button } from 'antd'
+import { DropOption } from 'components'
+import { Trans, withI18n } from '@lingui/react'
+import Link from 'umi/link'
+import styles from './List.less'
+
+const { confirm } = Modal
+
+@withI18n()
+class List extends PureComponent {
+  handleUserClick = (record, e) => {
+    const { onDeleteItem, onEditItem, i18n } = this.props
+    if (e === '1') {
+      onEditItem(record)
+    } else if (e === '2') {
+      confirm({
+        title: '你确定要删除这条记录吗？',
+        onOk() {
+          onDeleteItem(record.id)
+        },
+      })
+    }
+  }
+
+  render() {
+    const { onDeleteItem, onEditItem, i18n, ...tableProps } = this.props
+
+    const columns = [
+      {
+        title: '名称',
+        dataIndex: 'name',
+        key: 'name',
+        width: '25%',
+        render: (text, record) => <Link to={`user/${record.id}`}>{text}</Link>,
+      },
+      {
+        title: '创建时间',
+        dataIndex: 'createTime',
+        key: 'createTime',
+        width: '25%',
+      },
+      {
+        title: '启用',
+        dataIndex: 'valid',
+        key: 'valid',
+        width: '25%',
+        render: text => <span>{text ? '是' : '否'}</span>,
+      },
+      {
+        title: '备注',
+        dataIndex: 'remark',
+        key: 'remark',
+        width: '25%',
+      },
+      {
+        title: '操作',
+        key: 'operation',
+        fixed: 'right',
+        render: (text, record) => {
+          return (
+            <Button.Group>
+              <Button
+                icon="edit"
+                onClick={e => this.handleUserClick(record, '1')}
+                size={'small'}
+              >
+                更新
+              </Button>
+              <Button
+                icon="delete"
+                onClick={e => this.handleUserClick(record, '2')}
+                size={'small'}
+              >
+                删除
+              </Button>
+            </Button.Group>
+          )
+        },
+      },
+    ]
+
+    return (
+      <Table
+        {...tableProps}
+        pagination={{
+          ...tableProps.pagination,
+          showTotal: total => i18n.t`Total ${total} Items`,
+        }}
+        className={styles.table}
+        bordered
+        scroll={{ x: '100%' }}
+        columns={columns}
+        simple
+        rowKey={record => record.id}
+      />
+    )
+  }
+}
+
+List.propTypes = {
+  onDeleteItem: PropTypes.func,
+  onEditItem: PropTypes.func,
+  location: PropTypes.object,
+}
+
+export default List

src/pages/folk/category/components/List.less

@@ -0,0 +1,7 @@
+.table {
+  :global {
+    .ant-table td {
+      white-space: nowrap;
+    }
+  }
+}