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/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.1",
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: 'af-system',
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 = 'af-system', isTableTemp = false, modifyModelData = {}, businessType, title, fixedAddForm = {}, getDataParams = {}, simpleFormJsonData = {}
113
+ formItems, viewMode, isHandleFormKey = true, serviceName = 'system', isTableTemp = false, modifyModelData = {}, businessType, title, fixedAddForm = {}, getDataParams = {}, simpleFormJsonData = {}
114
114
  } = params
115
115
  this.loaded = false
116
- this.formItems = JSON.parse(JSON.stringify(formItems))
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 | af-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: 'af-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
-
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
+ > 本组件已经实现了自适应布局,在不同分辨率下的设备均可得到基本理想的展示效果
@@ -363,7 +363,7 @@ export default {
363
363
  queryParams: that.queryParams,
364
364
  form: conditionParams
365
365
  }, that.serviceName).then(res => {
366
- window.open('/res/excel/export/' + res.value)
366
+ window.open('/res/excel/export/' + res)
367
367
  })
368
368
  },
369
369
  onCancel () {}
@@ -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
- <img :src="logoSrc" alt="logo">
12
- <h1 :style="{ fontWeight: 'bold', fontSize: systemNameFontSize }">{{ systemName }}</h1>
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: {