/ssc30-admin

基础档案/会计平台

Primary LanguageJavaScriptMIT LicenseMIT

ssc30-admin Travis AppVeyor npm Codecov

注意：友账表所有功能已经迁移到FC项目。

本项目覆盖的功能包括并不限于：

  • SSC 3.0 后台管理
  • 友报账 - 基础档案

进行开发

安装依赖

npm install

以调试模式运行

npm run dev

打开 http://127.0.0.1:3008/ 访问首页

在本地测试编译结果

Development feature, like webpack HMR, is not include in demo mode. As this you could host this demo on a web server.

npm run build
npm run demo

Open http://127.0.0.1:3008/

React components tree

ArchContainer
|-- Grid 布局
|   |-- Row
|   |   `-- Col
|   |       `-- AdminCardActions 数据操作按钮
|   `-- Row
|       `-- Col
|           `-- AdminTable 表格
|-- AdminEditDialog
|   `-- AdminEditForm 编辑表单
`-- AdminEditDialog
    `-- AdminEditForm 创建表单

组件结构图

Components

AdminEditForm

Actions

redux state tree

档案管理

{
  "arch": {
    "data": {
      "items": [
        {
          "id": '0',
          "col1": 'row1, col1',
          "col2": 'row1, col2',
          "cols": [
            { "type": 'text', label: 'col1', value: 'row1, col1' },
            { "type": 'text', label: 'col2', value: 'row1, col2' }
          ]
        },
        {
          "id": '1',
          "col1": 'row2, col1',
          "col2": 'row2, col2',
          "cols": [
            { type: 'text', label: 'col1', value: 'row2, col1' },
            { type: 'text', label: 'col2', value: 'row2, col2' }
          ]
        }
      ],
      "currentItemCount": null,
      "startIndex": null,
      "totleItems": null
    },
    "selectedRows": '',
    "editDialog": {
      show: false,
      rowId: 0,
      formData: [
        { type: 'text', label: 'col1', value: 'row1, col1' },
        { type: 'text', label: 'col2', value: 'row1, col2' }
      ]
    },
    editFormData: [
      { type: 'text', label: 'col1', value: 'row1, col1' },
      { type: 'text', label: 'col2', value: 'row1, col2' }
    ],
    submitting: false,
    submited: false,
    createDialog: {
      show: false
    },
    createFormData: [
      { type: 'text', label: 'col1', value: 'row1, col1' },
      { type: 'text', label: 'col2', value: 'row1, col2' }
    ]
    adminAlert: {
      show: false,
      error: {
        code: 0,
        message: ''
      }
    }
  }
}

角色管理

{
  "arch": {
    "data": {
      "items": [
        {
          "id": '0',
          "col1": 'row1, col1',
          "col2": 'row1, col2',
          "cols": [
            { "type": 'text', label: 'col1', value: 'row1, col1' },
            { "type": 'text', label: 'col2', value: 'row1, col2' }
          ]
        },
        {
          "id": '1',
          "col1": 'row2, col1',
          "col2": 'row2, col2',
          "cols": [
            { type: 'text', label: 'col1', value: 'row2, col1' },
            { type: 'text', label: 'col2', value: 'row2, col2' }
          ]
        }
      ],
      "currentItemCount": null,
      "startIndex": null,
      "totleItems": null
    },
    "selectedRows": '',
    "editDialog": {
      show: false,
      rowId: 0,
      formData: [
        { type: 'text', label: 'col1', value: 'row1, col1' },
        { type: 'text', label: 'col2', value: 'row1, col2' }
      ]
    },
    editFormData: [
      { type: 'text', label: 'col1', value: 'row1, col1' },
      { type: 'text', label: 'col2', value: 'row1, col2' }
    ],
    submitting: false,
    submited: false,
    createDialog: {
      show: false
    },
    createFormData: [
      { type: 'text', label: 'col1', value: 'row1, col1' },
      { type: 'text', label: 'col2', value: 'row1, col2' }
    ]
    adminAlert: {
      show: false,
      error: {
        code: 0,
        message: ''
      }
    }
  }
}

Demos

Naming rule

user operations

  • Create, Add - create or add new entries
  • Read, Retrieve, Search, View - read, retrieve, search, or view existing entries
  • Update, Edit - update or edit existing entries
  • Delete, Deactivate, Remove - delete/deactivate/remove existing entries

Action name

<noun>-<verb>，比如Project-Create, User-Login，这样以object type（而不是action type）进行分组。

https://medium.com/lexical-labs-engineering/redux-best-practices-64d59775802e#7f41

创建新页面的一般步骤

比如页面名称叫做“基础档案配置页面”，那么名称定为ArchSetting

  1. 创建Container，位置./containers/ArchSettingPage.js
  2. 创建Action，位置./actions/archSetting.js
  3. 创建Action type，位置./constants/ArchSettingActionTypes.js
  4. 创建Reducer，位置./reducers/archSetting.js
  • 并添加到combineReducers()中，位置./reducers/index.js
  1. 添加到Sidebar中，位置./components/Sidebar.js
  2. 添加到Router中，位置./index.js
  3. 创建fake API，位置../../app_admin.js
  • 创建middleware，位置../server/routes/fakeApiArchSetting.js

Redux actions and reducers

Redux actions and reducers

常用网址

ref