D3j-commonop NPM

d3j-commonop

d3j-commonop 是一个多tab的通用后台。使用前请先阅读：通用多tab后台

how to use

first install create-react-app, create a project

npm install -g create-react-app
create-react-app my-app
cd my-app/

install d3j-commmonop

npm install d3j-commonop --save

执行: "fibjs ./node_modules/d3j-commonop/generateCode.js"

give a appConfig.json at src

npm run codeInit
npm start

appConfig

like this:

{
  "name": "Hello World",
  "logo":"http://lorempixel.com/200/80/",
  "defaultRoot": true,
  "menu":[
    {
      "icon": "mail",
      "label": "基本信息",
      "children": [
        {
          "icon": "setting",
          "label": "用户管理",
          "url": "/userlist",
          "data": {
            "title": "用户",
            "dataSource": "userlist",
            "pagination": {
              "size": 2,
              "pages": 7
            },
            "columns": [{
              "title": "用户名",
              "dataIndex": "username",
              "key": "username",
              "search": true
            }, {
              "title": "年龄",
              "dataIndex": "age",
              "key": "age",
              "search": true
            }, {
              "title": "密码",
              "dataIndex": "password",
              "key": "password"
            }, {
              "title": "操作",
              "key": "__op",
              "opList": " edit"
            }]
          }
        }
      ]
    },
    {
      "icon": "setting",
      "label": "学生管理",
      "url": "/student",
      "data": {
        "title": "学生",
        "dataSource": "student",
        "columns": [{
          "title": "用户名",
          "dataIndex": "username",
          "key": "username"
        }, {
          "title": "年龄",
          "dataIndex": "age",
          "key": "age"
        }, {
          "title": "操作",
          "key": "__op",
          "opList": "edit"
        }]
      }
    },
    {
      "icon": "mail",
      "label": "关于",
      "url": "/about"
    }
  ]
}

logo can also be :

"logo":{
  "url":"http://lorempixel.com/200/80/",
  "width":"200",
  "height":"80"
}

rooter

参考 history 的使用方法

import { history } from 'd3j-commonop'
history.push('/hello')

额外的支持

history.push({
    pathname: '/hello',
    search: {
        a: '1',
        b: '2'
    }
})

获取参数的时候：

const { urlSearch } = this.props

另外提供一个Link组件

import { RouterLib } from 'd3j-commonop'
const Link = RouterLib.Link

diy

override reducer

// you can handle before default by case first
// ./component/userlist/module/reducer.js
export default function reducer(state = {}, action) {
    switch (action.type) {
        case 'USERLIST_inputChange': {
            // 你自己的逻辑
            return {
                ...
            }
        }
       
        default: {
            // 否则默认处理
            return baseReducer(prefix, state, action)
        }
    }
}

auth

权限组件 SimpleAuth

<SimpleAuth power="编辑"><ComponentA/></SimpleAuth>

加强版BaseForm

新增下拉选择框，日期框（分为单个日期框以及包含开始日期和结束日期的日期框），级联选择框参数格式(和配置文件的columns类似，多了一个type属性) [{ title: '用户', dateIndex; 'userlist', key: 'userlist', type: 'select', //select表示类型是下拉选择框 oplist: 'Jone', 'Effy', 'Dongyang' }, { title: '起始时间', dateIndex; 'startDate', key: 'startDate', type: 'date' //date表示类型是单个日期的选择框 }, { title: '活动期限', dateIndex; 'period', key: 'period', type: 'rangeDate' //rangeDate表示类型是包含起止日期的选择框 }, { title: '省市', dateIndex; 'address', key: 'address', type: 'cascader', //cascader表示类型是级联选择器 oplist: [{ //oplist表示级联的内容，如果没有则默认是省市级联 value: 'LPL', label: 'LPL', children: { value: 'EDG', label: 'EDG' }, { value: 'WE', label: 'WE' } }, { value: 'LCK', label: 'LCK', children: [{ value: 'SKT', label: 'SKT', children: { value: 'KT', label: 'KT' } }] }] }]