vue2-client 1.7.1 → 1.7.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +661 -658
- package/Components.md +60 -60
- package/index.js +0 -8
- package/package.json +83 -83
- package/src/base-client/components/common/XAddNativeForm/XAddNativeForm.vue +7 -3
- package/src/base-client/components/common/XAddNativeForm/index.md +146 -96
- package/src/base-client/components/common/XTable/XTable.vue +1 -1
- package/src/base-client/components/index.js +41 -0
- package/src/components/menu/SideMenu.vue +15 -2
- package/src/config/default/setting.config.js +1 -1
- package/src/lib.js +1 -0
- package/vue.config.js +1 -1
package/Components.md
CHANGED
|
@@ -1,60 +1,60 @@
|
|
|
1
|
-
# vue2基础组件库组件介绍
|
|
2
|
-
|
|
3
|
-
## XAddForm
|
|
4
|
-
|
|
5
|
-
基于XAddNativeForm二次封装的动态表单的Modal形式
|
|
6
|
-
|
|
7
|
-
[使用文档](src/base-client/components/common/XAddForm/index.md)
|
|
8
|
-
|
|
9
|
-
## XAddNativeForm
|
|
10
|
-
|
|
11
|
-
通过JSON配置动态生成的数据保存表单
|
|
12
|
-
|
|
13
|
-
[使用文档](src/base-client/components/common/XAddNativeForm/index.md)
|
|
14
|
-
|
|
15
|
-
## XBadge
|
|
16
|
-
|
|
17
|
-
对antdv的badge组件进行重封装
|
|
18
|
-
|
|
19
|
-
[使用文档](src/base-client/components/common/XBadge/index.md)
|
|
20
|
-
|
|
21
|
-
## XCard
|
|
22
|
-
|
|
23
|
-
通用数据加载状态管理容器
|
|
24
|
-
|
|
25
|
-
提供一个可以根据数据加载状态显示不同内容的通用容器
|
|
26
|
-
当loadState为loading时,显示骨架屏(加载界面)
|
|
27
|
-
当loadState为success时,显示容器内容
|
|
28
|
-
当loadState为error时,显示点击重新加载数据的提示界面
|
|
29
|
-
|
|
30
|
-
[使用文档](src/base-client/components/common/XCard/index.md)
|
|
31
|
-
|
|
32
|
-
## XForm
|
|
33
|
-
|
|
34
|
-
通过JSON配置动态生成的数据筛选查询表单
|
|
35
|
-
|
|
36
|
-
[使用文档](src/base-client/components/common/XForm/index.md)
|
|
37
|
-
|
|
38
|
-
## XTable
|
|
39
|
-
|
|
40
|
-
通过JSON配置动态生成的数据表格
|
|
41
|
-
|
|
42
|
-
[使用文档](src/base-client/components/common/XTable/index.md)
|
|
43
|
-
|
|
44
|
-
## XFormCol
|
|
45
|
-
|
|
46
|
-
适用于动态表单的可以自适应各种分辨率设备的栅格组件封装
|
|
47
|
-
|
|
48
|
-
[使用文档](src/base-client/components/common/XFormCol/index.md)
|
|
49
|
-
|
|
50
|
-
## XFormTable
|
|
51
|
-
|
|
52
|
-
对XAddForm,XForm和XTable组件的二次封装,实现通过JSON配置动态生成一个完整的实体操作页面
|
|
53
|
-
|
|
54
|
-
[使用文档](src/base-client/components/common/XFormTable/index.md)
|
|
55
|
-
|
|
56
|
-
## XImportExcel
|
|
57
|
-
|
|
58
|
-
通用的导入excel组件
|
|
59
|
-
|
|
60
|
-
[使用文档](src/base-client/components/common/XImportExcel/index.md)
|
|
1
|
+
# vue2基础组件库组件介绍
|
|
2
|
+
|
|
3
|
+
## XAddForm
|
|
4
|
+
|
|
5
|
+
基于XAddNativeForm二次封装的动态表单的Modal形式
|
|
6
|
+
|
|
7
|
+
[使用文档](src/base-client/components/common/XAddForm/index.md)
|
|
8
|
+
|
|
9
|
+
## XAddNativeForm
|
|
10
|
+
|
|
11
|
+
通过JSON配置动态生成的数据保存表单
|
|
12
|
+
|
|
13
|
+
[使用文档](src/base-client/components/common/XAddNativeForm/index.md)
|
|
14
|
+
|
|
15
|
+
## XBadge
|
|
16
|
+
|
|
17
|
+
对antdv的badge组件进行重封装
|
|
18
|
+
|
|
19
|
+
[使用文档](src/base-client/components/common/XBadge/index.md)
|
|
20
|
+
|
|
21
|
+
## XCard
|
|
22
|
+
|
|
23
|
+
通用数据加载状态管理容器
|
|
24
|
+
|
|
25
|
+
提供一个可以根据数据加载状态显示不同内容的通用容器
|
|
26
|
+
当loadState为loading时,显示骨架屏(加载界面)
|
|
27
|
+
当loadState为success时,显示容器内容
|
|
28
|
+
当loadState为error时,显示点击重新加载数据的提示界面
|
|
29
|
+
|
|
30
|
+
[使用文档](src/base-client/components/common/XCard/index.md)
|
|
31
|
+
|
|
32
|
+
## XForm
|
|
33
|
+
|
|
34
|
+
通过JSON配置动态生成的数据筛选查询表单
|
|
35
|
+
|
|
36
|
+
[使用文档](src/base-client/components/common/XForm/index.md)
|
|
37
|
+
|
|
38
|
+
## XTable
|
|
39
|
+
|
|
40
|
+
通过JSON配置动态生成的数据表格
|
|
41
|
+
|
|
42
|
+
[使用文档](src/base-client/components/common/XTable/index.md)
|
|
43
|
+
|
|
44
|
+
## XFormCol
|
|
45
|
+
|
|
46
|
+
适用于动态表单的可以自适应各种分辨率设备的栅格组件封装
|
|
47
|
+
|
|
48
|
+
[使用文档](src/base-client/components/common/XFormCol/index.md)
|
|
49
|
+
|
|
50
|
+
## XFormTable
|
|
51
|
+
|
|
52
|
+
对XAddForm,XForm和XTable组件的二次封装,实现通过JSON配置动态生成一个完整的实体操作页面
|
|
53
|
+
|
|
54
|
+
[使用文档](src/base-client/components/common/XFormTable/index.md)
|
|
55
|
+
|
|
56
|
+
## XImportExcel
|
|
57
|
+
|
|
58
|
+
通用的导入excel组件
|
|
59
|
+
|
|
60
|
+
[使用文档](src/base-client/components/common/XImportExcel/index.md)
|
package/index.js
CHANGED
|
@@ -11,10 +11,6 @@ import Antd from 'ant-design-vue'
|
|
|
11
11
|
import Viser from 'viser-vue'
|
|
12
12
|
// 插件
|
|
13
13
|
import Plugins from '@vue2-client/base-client/plugins'
|
|
14
|
-
import VueCustomElement from 'vue-custom-element'
|
|
15
|
-
|
|
16
|
-
// 引入组件
|
|
17
|
-
import XAddNativeForm from '@vue2-client/base-client/components/common/XAddNativeForm'
|
|
18
14
|
|
|
19
15
|
const routerOptions = initRouter()
|
|
20
16
|
const i18n = initI18n('CN', 'US')
|
|
@@ -22,10 +18,6 @@ const i18n = initI18n('CN', 'US')
|
|
|
22
18
|
Vue.use(Antd)
|
|
23
19
|
Vue.use(Viser)
|
|
24
20
|
Vue.use(Plugins)
|
|
25
|
-
Vue.use(VueCustomElement)
|
|
26
|
-
|
|
27
|
-
// 把组件注册成web-component
|
|
28
|
-
Vue.customElement('x-add-native-form', XAddNativeForm)
|
|
29
21
|
|
|
30
22
|
Vue.config.productionTip = false
|
|
31
23
|
const message = Vue.prototype.$message
|
package/package.json
CHANGED
|
@@ -1,83 +1,83 @@
|
|
|
1
|
-
{
|
|
2
|
-
"name": "vue2-client",
|
|
3
|
-
"version": "1.7.
|
|
4
|
-
"private": false,
|
|
5
|
-
"scripts": {
|
|
6
|
-
"serve": "SET NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve",
|
|
7
|
-
"build": "vue-cli-service build",
|
|
8
|
-
"test:unit": "vue-cli-service test:unit",
|
|
9
|
-
"lint": "vue-cli-service lint",
|
|
10
|
-
"build:preview": "vue-cli-service build --mode preview",
|
|
11
|
-
"lint:nofix": "vue-cli-service lint --no-fix"
|
|
12
|
-
},
|
|
13
|
-
"dependencies": {
|
|
14
|
-
"@amap/amap-jsapi-loader": "^1.0.1",
|
|
15
|
-
"@antv/data-set": "^0.11.8",
|
|
16
|
-
"@antv/g2plot": "^2.4.29",
|
|
17
|
-
"@vue/babel-preset-jsx": "^1.4.0",
|
|
18
|
-
"animate.css": "^4.1.1",
|
|
19
|
-
"ant-design-vue": "^1.7.8",
|
|
20
|
-
"axios": "^0.27.2",
|
|
21
|
-
"clipboard": "^2.0.11",
|
|
22
|
-
"core-js": "^3.30.1",
|
|
23
|
-
"crypto-js": "^4.1.1",
|
|
24
|
-
"date-fns": "^2.29.3",
|
|
25
|
-
"default-passive-events": "^2.0.0",
|
|
26
|
-
"enquire.js": "^2.1.6",
|
|
27
|
-
"file-saver": "^2.0.5",
|
|
28
|
-
"highlight.js": "^11.7.0",
|
|
29
|
-
"js-base64": "^3.7.5",
|
|
30
|
-
"js-cookie": "^2.2.1",
|
|
31
|
-
"jsencrypt": "^3.3.2",
|
|
32
|
-
"lodash.get": "^4.4.2",
|
|
33
|
-
"mockjs": "^1.1.0",
|
|
34
|
-
"nprogress": "^0.2.0",
|
|
35
|
-
"videojs-contrib-hls": "^5.15.0",
|
|
36
|
-
"viser-vue": "^2.4.8",
|
|
37
|
-
"vue": "2.6.14",
|
|
38
|
-
"vue-i18n": "^8.28.2",
|
|
39
|
-
"vue-json-viewer": "^2.2.22",
|
|
40
|
-
"vue-router": "^3.6.5",
|
|
41
|
-
"vue-video-player": "^5.0.2",
|
|
42
|
-
"vuedraggable": "^2.24.3",
|
|
43
|
-
"vuex": "^3.6.2",
|
|
44
|
-
"xlsx": "0.18.5"
|
|
45
|
-
},
|
|
46
|
-
"devDependencies": {
|
|
47
|
-
"@ant-design/colors": "^7.0.0",
|
|
48
|
-
"@babel/core": "^7.21.4",
|
|
49
|
-
"@vue/cli-plugin-babel": "^4.5.19",
|
|
50
|
-
"@vue/cli-plugin-eslint": "^4.5.19",
|
|
51
|
-
"@vue/cli-service": "^4.5.19",
|
|
52
|
-
"@vue/eslint-config-standard": "^4.0.0",
|
|
53
|
-
"@vuepress/plugin-back-to-top": "^1.9.9",
|
|
54
|
-
"babel-eslint": "^10.1.0",
|
|
55
|
-
"babel-plugin-transform-remove-console": "^6.9.4",
|
|
56
|
-
"babel-polyfill": "^6.26.0",
|
|
57
|
-
"compression-webpack-plugin": "^4.0.1",
|
|
58
|
-
"deepmerge": "^4.3.1",
|
|
59
|
-
"document-register-element": "^1.14.10",
|
|
60
|
-
"eslint": "^6.8.0",
|
|
61
|
-
"eslint-plugin-import": "^2.26.0",
|
|
62
|
-
"eslint-plugin-node": "^11.1.0",
|
|
63
|
-
"eslint-plugin-promise": "^4.3.1",
|
|
64
|
-
"eslint-plugin-standard": "^4.1.0",
|
|
65
|
-
"eslint-plugin-vue": "^6.2.2",
|
|
66
|
-
"fast-deep-equal": "^3.1.3",
|
|
67
|
-
"less-loader": "^6.2.0",
|
|
68
|
-
"script-loader": "^0.7.2",
|
|
69
|
-
"style-resources-loader": "^1.5.0",
|
|
70
|
-
"vue-cli-plugin-style-resources-loader": "^0.1.5",
|
|
71
|
-
"vue-custom-element": "^3.3.0",
|
|
72
|
-
"vue-template-compiler": "2.6.14",
|
|
73
|
-
"vuepress": "^1.9.9",
|
|
74
|
-
"webpack": "^4.46.0",
|
|
75
|
-
"webpack-theme-color-replacer": "^1.4.7",
|
|
76
|
-
"whatwg-fetch": "^3.6.2"
|
|
77
|
-
},
|
|
78
|
-
"browserslist": [
|
|
79
|
-
"> 1%",
|
|
80
|
-
"last 2 versions",
|
|
81
|
-
"not ie <= 10"
|
|
82
|
-
]
|
|
83
|
-
}
|
|
1
|
+
{
|
|
2
|
+
"name": "vue2-client",
|
|
3
|
+
"version": "1.7.2",
|
|
4
|
+
"private": false,
|
|
5
|
+
"scripts": {
|
|
6
|
+
"serve": "SET NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve",
|
|
7
|
+
"build": "SET NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service build",
|
|
8
|
+
"test:unit": "vue-cli-service test:unit",
|
|
9
|
+
"lint": "vue-cli-service lint",
|
|
10
|
+
"build:preview": "vue-cli-service build --mode preview",
|
|
11
|
+
"lint:nofix": "vue-cli-service lint --no-fix"
|
|
12
|
+
},
|
|
13
|
+
"dependencies": {
|
|
14
|
+
"@amap/amap-jsapi-loader": "^1.0.1",
|
|
15
|
+
"@antv/data-set": "^0.11.8",
|
|
16
|
+
"@antv/g2plot": "^2.4.29",
|
|
17
|
+
"@vue/babel-preset-jsx": "^1.4.0",
|
|
18
|
+
"animate.css": "^4.1.1",
|
|
19
|
+
"ant-design-vue": "^1.7.8",
|
|
20
|
+
"axios": "^0.27.2",
|
|
21
|
+
"clipboard": "^2.0.11",
|
|
22
|
+
"core-js": "^3.30.1",
|
|
23
|
+
"crypto-js": "^4.1.1",
|
|
24
|
+
"date-fns": "^2.29.3",
|
|
25
|
+
"default-passive-events": "^2.0.0",
|
|
26
|
+
"enquire.js": "^2.1.6",
|
|
27
|
+
"file-saver": "^2.0.5",
|
|
28
|
+
"highlight.js": "^11.7.0",
|
|
29
|
+
"js-base64": "^3.7.5",
|
|
30
|
+
"js-cookie": "^2.2.1",
|
|
31
|
+
"jsencrypt": "^3.3.2",
|
|
32
|
+
"lodash.get": "^4.4.2",
|
|
33
|
+
"mockjs": "^1.1.0",
|
|
34
|
+
"nprogress": "^0.2.0",
|
|
35
|
+
"videojs-contrib-hls": "^5.15.0",
|
|
36
|
+
"viser-vue": "^2.4.8",
|
|
37
|
+
"vue": "2.6.14",
|
|
38
|
+
"vue-i18n": "^8.28.2",
|
|
39
|
+
"vue-json-viewer": "^2.2.22",
|
|
40
|
+
"vue-router": "^3.6.5",
|
|
41
|
+
"vue-video-player": "^5.0.2",
|
|
42
|
+
"vuedraggable": "^2.24.3",
|
|
43
|
+
"vuex": "^3.6.2",
|
|
44
|
+
"xlsx": "0.18.5"
|
|
45
|
+
},
|
|
46
|
+
"devDependencies": {
|
|
47
|
+
"@ant-design/colors": "^7.0.0",
|
|
48
|
+
"@babel/core": "^7.21.4",
|
|
49
|
+
"@vue/cli-plugin-babel": "^4.5.19",
|
|
50
|
+
"@vue/cli-plugin-eslint": "^4.5.19",
|
|
51
|
+
"@vue/cli-service": "^4.5.19",
|
|
52
|
+
"@vue/eslint-config-standard": "^4.0.0",
|
|
53
|
+
"@vuepress/plugin-back-to-top": "^1.9.9",
|
|
54
|
+
"babel-eslint": "^10.1.0",
|
|
55
|
+
"babel-plugin-transform-remove-console": "^6.9.4",
|
|
56
|
+
"babel-polyfill": "^6.26.0",
|
|
57
|
+
"compression-webpack-plugin": "^4.0.1",
|
|
58
|
+
"deepmerge": "^4.3.1",
|
|
59
|
+
"document-register-element": "^1.14.10",
|
|
60
|
+
"eslint": "^6.8.0",
|
|
61
|
+
"eslint-plugin-import": "^2.26.0",
|
|
62
|
+
"eslint-plugin-node": "^11.1.0",
|
|
63
|
+
"eslint-plugin-promise": "^4.3.1",
|
|
64
|
+
"eslint-plugin-standard": "^4.1.0",
|
|
65
|
+
"eslint-plugin-vue": "^6.2.2",
|
|
66
|
+
"fast-deep-equal": "^3.1.3",
|
|
67
|
+
"less-loader": "^6.2.0",
|
|
68
|
+
"script-loader": "^0.7.2",
|
|
69
|
+
"style-resources-loader": "^1.5.0",
|
|
70
|
+
"vue-cli-plugin-style-resources-loader": "^0.1.5",
|
|
71
|
+
"vue-custom-element": "^3.3.0",
|
|
72
|
+
"vue-template-compiler": "2.6.14",
|
|
73
|
+
"vuepress": "^1.9.9",
|
|
74
|
+
"webpack": "^4.46.0",
|
|
75
|
+
"webpack-theme-color-replacer": "^1.4.7",
|
|
76
|
+
"whatwg-fetch": "^3.6.2"
|
|
77
|
+
},
|
|
78
|
+
"browserslist": [
|
|
79
|
+
"> 1%",
|
|
80
|
+
"last 2 versions",
|
|
81
|
+
"not ie <= 10"
|
|
82
|
+
]
|
|
83
|
+
}
|
|
@@ -69,7 +69,7 @@ export default {
|
|
|
69
69
|
// 表单项集合
|
|
70
70
|
formItems: [],
|
|
71
71
|
// 服务名称
|
|
72
|
-
serviceName: '
|
|
72
|
+
serviceName: 'system',
|
|
73
73
|
// 修改有文件的表单时使用
|
|
74
74
|
files: [],
|
|
75
75
|
images: [],
|
|
@@ -110,10 +110,14 @@ export default {
|
|
|
110
110
|
methods: {
|
|
111
111
|
init (params) {
|
|
112
112
|
const {
|
|
113
|
-
formItems, viewMode, isHandleFormKey = true, serviceName = '
|
|
113
|
+
formItems, viewMode, isHandleFormKey = true, serviceName = 'system', isTableTemp = false, modifyModelData = {}, businessType, title, fixedAddForm = {}, getDataParams = {}, simpleFormJsonData = {}
|
|
114
114
|
} = params
|
|
115
115
|
this.loaded = false
|
|
116
|
-
|
|
116
|
+
if (typeof formItems === 'string') {
|
|
117
|
+
this.formItems = JSON.parse(formItems)
|
|
118
|
+
} else {
|
|
119
|
+
this.formItems = JSON.parse(JSON.stringify(formItems))
|
|
120
|
+
}
|
|
117
121
|
this.viewMode = viewMode
|
|
118
122
|
this.isHandleFormKey = isHandleFormKey
|
|
119
123
|
this.serviceName = serviceName
|
|
@@ -1,96 +1,146 @@
|
|
|
1
|
-
# XAddNativeForm
|
|
2
|
-
|
|
3
|
-
动态新增/修改表单控件,根据JSON配置生成一个完整的可供新增/修改数据的动态表单
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
## 何时使用
|
|
7
|
-
|
|
8
|
-
当需要一个可供新增/修改数据的动态生成的表单时
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
引用方式:
|
|
12
|
-
|
|
13
|
-
```javascript
|
|
14
|
-
import XAddNativeForm from '@vue2-client/base-client/components/XAddNativeForm/XAddNativeForm'
|
|
15
|
-
|
|
16
|
-
export default {
|
|
17
|
-
components: {
|
|
18
|
-
XAddNativeForm
|
|
19
|
-
}
|
|
20
|
-
}
|
|
21
|
-
```
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
## 代码演示
|
|
26
|
-
|
|
27
|
-
```html
|
|
28
|
-
<x-add-native-form
|
|
29
|
-
ref="nativeForm"
|
|
30
|
-
@onSubmit="submit"/>
|
|
31
|
-
```
|
|
32
|
-
|
|
33
|
-
## 构造参数,通过init方法构造
|
|
34
|
-
|
|
35
|
-
| 参数 | 说明 | 类型 | 默认值
|
|
36
|
-
|
|
37
|
-
| formItems | 表单项集合 | array | []
|
|
38
|
-
| viewMode | 是否为预览模式 | bool | false
|
|
39
|
-
| isHandleFormKey | 是否对提交表单的key进行处理 | bool | true
|
|
40
|
-
| serviceName | 所属服务模块名 | string |
|
|
41
|
-
| businessType | 业务类型(新增/修改) | string | -
|
|
42
|
-
| title | 业务标题 | string | -
|
|
43
|
-
| getDataParams | 调用logic获取下拉框数据源的追加参数 | {} | -
|
|
44
|
-
| simpleFormJsonData | 动态简易表单集合 | {} | -
|
|
45
|
-
|
|
46
|
-
## 事件
|
|
47
|
-
| 事件 | 说明 | 类型 | 默认值 |
|
|
48
|
-
|-----------|----------------------|-------|-----------|
|
|
49
|
-
| @onSubmit | 表单的提交事件 | event | - |
|
|
50
|
-
|
|
51
|
-
## 例子1
|
|
52
|
-
----
|
|
53
|
-
```vue
|
|
54
|
-
<template>
|
|
55
|
-
<x-add-native-form
|
|
56
|
-
ref="nativeForm"
|
|
57
|
-
@onSubmit="submit"/>
|
|
58
|
-
</template>
|
|
59
|
-
<script>
|
|
60
|
-
import { getConfigUrl } from '@vue2-client/services/api/common'
|
|
61
|
-
export default {
|
|
62
|
-
created () {
|
|
63
|
-
this.initComponents()
|
|
64
|
-
},
|
|
65
|
-
methods: {
|
|
66
|
-
initComponents() {
|
|
67
|
-
// 获取请求配置中心的地址
|
|
68
|
-
const url = getConfigUrl('yourConfigModuleName')
|
|
69
|
-
post(url, { configName: 'yourConfigName' }).then(res => {
|
|
70
|
-
if (this.$refs.nativeForm) {
|
|
71
|
-
this.$refs.nativeForm.init({
|
|
72
|
-
formItems: res,
|
|
73
|
-
serviceName: '
|
|
74
|
-
businessType: '新增',
|
|
75
|
-
title: '新增告警记录'
|
|
76
|
-
})
|
|
77
|
-
}
|
|
78
|
-
})
|
|
79
|
-
},
|
|
80
|
-
submit (res) {
|
|
81
|
-
post(api.addData, res.realForm).then(data => {
|
|
82
|
-
this.$message.success(res.businessType + '成功!')
|
|
83
|
-
}).catch(e => {
|
|
84
|
-
this.$message.error(res.businessType + '失败:' + e)
|
|
85
|
-
})
|
|
86
|
-
}
|
|
87
|
-
}
|
|
88
|
-
}
|
|
89
|
-
</script>
|
|
90
|
-
```
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
1
|
+
# XAddNativeForm
|
|
2
|
+
|
|
3
|
+
动态新增/修改表单控件,根据JSON配置生成一个完整的可供新增/修改数据的动态表单
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
## 何时使用
|
|
7
|
+
|
|
8
|
+
当需要一个可供新增/修改数据的动态生成的表单时
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
引用方式:
|
|
12
|
+
|
|
13
|
+
```javascript
|
|
14
|
+
import XAddNativeForm from '@vue2-client/base-client/components/XAddNativeForm/XAddNativeForm'
|
|
15
|
+
|
|
16
|
+
export default {
|
|
17
|
+
components: {
|
|
18
|
+
XAddNativeForm
|
|
19
|
+
}
|
|
20
|
+
}
|
|
21
|
+
```
|
|
22
|
+
|
|
23
|
+
|
|
24
|
+
|
|
25
|
+
## 代码演示
|
|
26
|
+
|
|
27
|
+
```html
|
|
28
|
+
<x-add-native-form
|
|
29
|
+
ref="nativeForm"
|
|
30
|
+
@onSubmit="submit"/>
|
|
31
|
+
```
|
|
32
|
+
|
|
33
|
+
## 构造参数,通过init方法构造
|
|
34
|
+
|
|
35
|
+
| 参数 | 说明 | 类型 | 默认值 |
|
|
36
|
+
|-----------------|----------------------|-------|--------|
|
|
37
|
+
| formItems | 表单项集合 | array | [] |
|
|
38
|
+
| viewMode | 是否为预览模式 | bool | false |
|
|
39
|
+
| isHandleFormKey | 是否对提交表单的key进行处理 | bool | true |
|
|
40
|
+
| serviceName | 所属服务模块名 | string | system |
|
|
41
|
+
| businessType | 业务类型(新增/修改) | string | - |
|
|
42
|
+
| title | 业务标题 | string | - |
|
|
43
|
+
| getDataParams | 调用logic获取下拉框数据源的追加参数 | {} | - |
|
|
44
|
+
| simpleFormJsonData | 动态简易表单集合 | {} | - |
|
|
45
|
+
|
|
46
|
+
## 事件
|
|
47
|
+
| 事件 | 说明 | 类型 | 默认值 |
|
|
48
|
+
|-----------|----------------------|-------|-----------|
|
|
49
|
+
| @onSubmit | 表单的提交事件 | event | - |
|
|
50
|
+
|
|
51
|
+
## 例子1
|
|
52
|
+
----
|
|
53
|
+
```vue
|
|
54
|
+
<template>
|
|
55
|
+
<x-add-native-form
|
|
56
|
+
ref="nativeForm"
|
|
57
|
+
@onSubmit="submit"/>
|
|
58
|
+
</template>
|
|
59
|
+
<script>
|
|
60
|
+
import { getConfigUrl } from '@vue2-client/services/api/common'
|
|
61
|
+
export default {
|
|
62
|
+
created () {
|
|
63
|
+
this.initComponents()
|
|
64
|
+
},
|
|
65
|
+
methods: {
|
|
66
|
+
initComponents() {
|
|
67
|
+
// 获取请求配置中心的地址
|
|
68
|
+
const url = getConfigUrl('yourConfigModuleName')
|
|
69
|
+
post(url, { configName: 'yourConfigName' }).then(res => {
|
|
70
|
+
if (this.$refs.nativeForm) {
|
|
71
|
+
this.$refs.nativeForm.init({
|
|
72
|
+
formItems: res,
|
|
73
|
+
serviceName: 'system',
|
|
74
|
+
businessType: '新增',
|
|
75
|
+
title: '新增告警记录'
|
|
76
|
+
})
|
|
77
|
+
}
|
|
78
|
+
})
|
|
79
|
+
},
|
|
80
|
+
submit (res) {
|
|
81
|
+
post(api.addData, res.realForm).then(data => {
|
|
82
|
+
this.$message.success(res.businessType + '成功!')
|
|
83
|
+
}).catch(e => {
|
|
84
|
+
this.$message.error(res.businessType + '失败:' + e)
|
|
85
|
+
})
|
|
86
|
+
}
|
|
87
|
+
}
|
|
88
|
+
}
|
|
89
|
+
</script>
|
|
90
|
+
```
|
|
91
|
+
|
|
92
|
+
## JSON配置示例
|
|
93
|
+
----
|
|
94
|
+
`这是一个表单配置示例,通过以下配置,你会得到一个有选项的单选框,一个带校验的输入框,以及一个文本域`
|
|
95
|
+
```json
|
|
96
|
+
[
|
|
97
|
+
{
|
|
98
|
+
"name": "是否通气",
|
|
99
|
+
"model": "is_ventilate",
|
|
100
|
+
"keys": [
|
|
101
|
+
{ "label": "是", "value": "1" },
|
|
102
|
+
{ "label": "否", "value": "0" }
|
|
103
|
+
],
|
|
104
|
+
"type": "radio",
|
|
105
|
+
"addOrEdit": "all",
|
|
106
|
+
},
|
|
107
|
+
{
|
|
108
|
+
"name": "处理人",
|
|
109
|
+
"model": "f_processor",
|
|
110
|
+
"rule": {
|
|
111
|
+
"required": true
|
|
112
|
+
},
|
|
113
|
+
"type": "input",
|
|
114
|
+
"addOrEdit": "all",
|
|
115
|
+
},
|
|
116
|
+
{
|
|
117
|
+
"name": "处理内容",
|
|
118
|
+
"model": "f_handle_content",
|
|
119
|
+
"type": "textarea",
|
|
120
|
+
"addOrEdit": "all",
|
|
121
|
+
}
|
|
122
|
+
]
|
|
123
|
+
```
|
|
124
|
+
|
|
125
|
+
## JSON配置规范
|
|
126
|
+
----
|
|
127
|
+
| 参数 | 说明 | 类型 | 默认值 |
|
|
128
|
+
|-----------------|----------------------|-------|-----------|
|
|
129
|
+
| name | 表单项名称 | string | '' |
|
|
130
|
+
| model | 表单项key | string | '' |
|
|
131
|
+
| rule | 表单校验 | json | {} |
|
|
132
|
+
| -> required | 是否必填 | bool | false |
|
|
133
|
+
| type | 表单类型 | string | input |
|
|
134
|
+
| keys | 当表单类型是select,radio时的选项值 | Array | [] |
|
|
135
|
+
| -> label | 选项的字面值 | string | '' |
|
|
136
|
+
| -> value | 选项的实际值 | string | '' |
|
|
137
|
+
| addOrEdit | 新增/修改场景 | string | all |
|
|
138
|
+
| -> add | 仅新增 | string | - |
|
|
139
|
+
| -> edit | 仅修改 | string | - |
|
|
140
|
+
| -> all | 全部支持 | string | - |
|
|
141
|
+
|
|
142
|
+
|
|
143
|
+
注意事项
|
|
144
|
+
----
|
|
145
|
+
|
|
146
|
+
> 本组件已经实现了自适应布局,在不同分辨率下的设备均可得到基本理想的展示效果
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
import XForm from './common/XForm'
|
|
2
|
+
import XAddForm from './common/XAddForm'
|
|
3
|
+
import XAddNativeForm from './common/XAddNativeForm'
|
|
4
|
+
import XFormCol from './common/XFormCol'
|
|
5
|
+
import XTable from './common/XTable'
|
|
6
|
+
import XTreeOne from './common/XTreeOne'
|
|
7
|
+
import XImportExcel from './common/XImportExcel'
|
|
8
|
+
import XDataDrawer from './common/XDataDrawer'
|
|
9
|
+
import XCard from './common/XCard'
|
|
10
|
+
import XBadge from './common/XBadge'
|
|
11
|
+
import Upload from './common/Upload'
|
|
12
|
+
import JSONToTree from './common/JSONToTree'
|
|
13
|
+
import FormGroupEdit from './common/FormGroupEdit'
|
|
14
|
+
import FormGroupQuery from './common/FormGroupQuery'
|
|
15
|
+
import AddressSearchCombobox from './common/AddressSearchCombobox'
|
|
16
|
+
import AmapMarker from './common/AmapMarker'
|
|
17
|
+
import CreateQuery from './common/CreateQuery'
|
|
18
|
+
import CreateSimpleFormQuery from './common/CreateSimpleFormQuery'
|
|
19
|
+
import PersonSetting from './common/PersonSetting'
|
|
20
|
+
|
|
21
|
+
export default {
|
|
22
|
+
XForm,
|
|
23
|
+
XAddForm,
|
|
24
|
+
XAddNativeForm,
|
|
25
|
+
XFormCol,
|
|
26
|
+
XTable,
|
|
27
|
+
XTreeOne,
|
|
28
|
+
XImportExcel,
|
|
29
|
+
XDataDrawer,
|
|
30
|
+
XCard,
|
|
31
|
+
XBadge,
|
|
32
|
+
Upload,
|
|
33
|
+
JSONToTree,
|
|
34
|
+
FormGroupEdit,
|
|
35
|
+
FormGroupQuery,
|
|
36
|
+
AddressSearchCombobox,
|
|
37
|
+
AmapMarker,
|
|
38
|
+
CreateQuery,
|
|
39
|
+
CreateSimpleFormQuery,
|
|
40
|
+
PersonSetting
|
|
41
|
+
}
|
|
@@ -8,8 +8,14 @@
|
|
|
8
8
|
:trigger="null">
|
|
9
9
|
<div :class="['logo', theme]">
|
|
10
10
|
<router-link to="/dashboard/workplace">
|
|
11
|
-
<
|
|
12
|
-
|
|
11
|
+
<a-row type="flex" align="middle" style="height: 64px;word-wrap: break-word;word-break:break-all;">
|
|
12
|
+
<a-col :span="4">
|
|
13
|
+
<img :src="logoSrc" alt="logo">
|
|
14
|
+
</a-col>
|
|
15
|
+
<a-col :span="20" style="line-height: 18px;" v-show="!collapsed">
|
|
16
|
+
<span style="vertical-align: middle" :style="{ fontWeight: 'bold', fontSize: systemNameFontSizeMain, color: 'white' }">{{ systemName }}</span>
|
|
17
|
+
</a-col>
|
|
18
|
+
</a-row>
|
|
13
19
|
</router-link>
|
|
14
20
|
</div>
|
|
15
21
|
<i-menu :theme="theme" :collapsed="collapsed" :options="menuData" @select="onSelect" class="menu"/>
|
|
@@ -47,6 +53,13 @@ export default {
|
|
|
47
53
|
sideTheme () {
|
|
48
54
|
return this.theme === 'light' ? this.theme : 'dark'
|
|
49
55
|
},
|
|
56
|
+
systemNameFontSizeMain () {
|
|
57
|
+
let systemNameFontSize = this.systemNameFontSize
|
|
58
|
+
if (this.systemName.length > 15) {
|
|
59
|
+
systemNameFontSize = '18px'
|
|
60
|
+
}
|
|
61
|
+
return systemNameFontSize
|
|
62
|
+
},
|
|
50
63
|
...mapState('setting', ['isMobile', 'systemName', 'logoSrc', 'systemNameFontSize'])
|
|
51
64
|
},
|
|
52
65
|
methods: {
|