# 业务系统前端开发
前端开发需具备 vue、css、js 等前端基础知识。
# 模板启动
# 模板下载
下载模板工程(nepoch-business-demo)
# 配置修改
需在系统根目录下新建 .env.[name].local 文件， [name]对应系统的名称， 文件内容为 NODE_ENV=development
# 铁建模式
yarn run dev:managementOauthCrec
yarn run dev:flowCrec
# 本地模式
yarn run dev:managementOauth
yarn run dev:flowLocal
1
2
3
4
5
6
2
3
4
5
6
# 配置 host 文件
# host映射
127.0.0.1 demo.custom.com
1
2
2
# 模板目录结构
nepoch-business-demo
├── config
├── public
│ └── themes
│ └── fonts
├── script
└── src
├── assets
│ ├── home
│ │ └── contract
│ ├── icons
│ ├── layout
│ └── login
├── base
│ ├── gd-choose-module
│ ├── gd-layout
│ │ └── components
│ │ └── menus
│ └── gd-select-tree
├── common
├── directives
│ └── modules
│ ├── collapse
│ ├── dialogMove
│ └── resize
├── mixins
├── mock
│ └── modules
│ └── common
├── plugins
├── style
│ └── themes
│ └── default
├── utils
│ └── error
└── views
├── business-management
│ ├── api
│ ├── components
│ │ ├── gd-person
│ │ └── gd-program
│ ├── router
│ │ └── modules
│ ├── utils
│ └── views
│ ├── demo
│ │ └── add-edit
│ └── home
├── common
│ ├── api
│ │ └── settings
│ │ ├── human-resource
│ │ ├── menu-mgt
│ │ ├── organ-mgt
│ │ │ ├── person
│ │ │ ├── position
│ │ │ ├── program
│ │ │ ├── project
│ │ │ └── structure
│ │ └── permission-mgt
│ ├── components
│ │ ├── gd-attachment
│ │ ├── gd-choose-person
│ │ ├── gd-edit-form
│ │ ├── gd-extract-person
│ │ ├── gd-flow-choice
│ │ ├── gd-record
│ │ ├── gd-submit-buttons
│ │ └── gd-track
│ ├── router
│ ├── store
│ │ └── modules
│ ├── utils
│ └── views
│ ├── 404
│ ├── menus
│ └── unAuthorized
└── login-management
└── views
└── login
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
目录说明
#启动配置
.env.managementOauth (本地登录页面配置)
.env.managementOauthCrec (铁建启动配置)
.env.managementLocal (local启动配置)
.env.flowLocal (local工作流)
.env.flowCrec (铁建工作)
package.json (开发版本配置)
.npmrc (镜像配置)
config (webpack打包配置)
public (icon、主题配置)
script (eslint校验配置)
#打包配置
build_web_crec.sh (铁建打包配置)
build_web_local.sh (local打包配置)
#公用部分
src/base (组件部分)
src/common (字典配置)
src/utils (公共方法)
#代码部分
src/views/common (平台系统代码)
src/views/flow-management (流程设计器代码)
src/views/router/settings （路由配置）
src/views/common/config (业务禁止的按钮在此)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
# 开发约定
# 规范
# 代码规范
见附件：开发说明/代码规范.md
[开发说明](./01 Glink 组件库文档.html)
# 提交规范
见附件：开发说明/提交规范.md
# 前端组件
前端基础组件、业务组件使用方法见附件：01 Glink 组件库文档.md
# 注册字典
数据字典管理进行字典新增，如下图。
# 字典存入 LOOKUPS 以及使用方法源码
见 src/utils /lookup、src/utils /jsonpCallBack 文件，源码如下
import { register } from '@/utils/lookup'
import storage from '@/utils/cache'
/**
* 将后端返回的数据字典注册到代码内
*/
window.registerLookups = list => {
const groups = {}
list.forEach(({ parentCode, code, name }) => {
if (!groups[parentCode]) {
groups[parentCode] = []
}
groups[parentCode].push({ name, code })
})
let groupEntries = {}
// 从缓存中读取字典数据
// const LOOKUPS = storage.getItem('LOOKUPS')
// if (LOOKUPS) {
// groupEntries = Object.entries(LOOKUPS)
// } else {
// // 写字典数据到缓存中
// storage.setItem('LOOKUPS', groups)
// groupEntries = Object.entries(groups)
// }
storage.setItem('LOOKUPS', groups)
groupEntries = Object.entries(groups)
groupEntries.forEach(([parentCode, list]) => {
register(parentCode, list)
})
}
/**
* 将后端返回的docServerJS插入到页面中
*/
window.regDocSrvApiJsUrl = row => {
const docServerJS = document.querySelector('#docServer') || null
if (!docServerJS) {
let script = document.createElement('script')
script.src = row
script.id = 'docServer'
document.body.appendChild(script)
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
import storage from '@/utils/cache'
/**
* {
* groupCode:[{
* code: '',
* name: ''
* }]
* }
*/
const lookups = {}
// 注册字典
const register = (code, list) => {
lookups[code] = list
}
// 通过code 获取字典
const get = code => {
// 从缓存中读取字典数据
const LOOKUPS = storage.getItem('LOOKUPS')
if (LOOKUPS) {
return LOOKUPS[code]
} else {
return lookups[code]
}
}
// 通过 code 与 子code获取中文
const getName = (...rest) => {
const [pCode, code] = rest
if (rest.length === 1) {
const children = get(pCode) || []
return code => {
const child = children.filter(child => child.code === code)[0]
if (child) {
return child.name
}
}
} else {
return getName(pCode)(code)
}
}
// 针对表格formater 特殊制定api
const formatCell = code => {
const getChilren = getName(code)
// 为函数命名
const formatLookUp = (row, column, cellValue) => {
return getChilren(`${cellValue}`)
}
// 带出来字典键
formatLookUp.lookup = code
return formatLookUp
}
export { register, get, getName, formatCell }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
# 前端认证相关
# local认证地址
VUE_APP_AUTH_URL = '/api/oauth2/authorization/glink'
# 铁建认证地址
VUE_APP_AUTH_URL = '/api/oauth2/authorization/wzyw'
1
2
3
4
2
3
4