vue2-client 1.7.0 → 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.
Files changed (128) hide show
  1. package/.env +15 -15
  2. package/CHANGELOG.md +661 -628
  3. package/Components.md +60 -0
  4. package/index.js +31 -30
  5. package/package.json +83 -81
  6. package/src/base-client/components/common/AddressSearchCombobox/AddressSearchCombobox.vue +316 -316
  7. package/src/base-client/components/common/CitySelect/CitySelect.vue +247 -247
  8. package/src/base-client/components/common/CreateQuery/CreateQuery.vue +669 -667
  9. package/src/base-client/components/common/CreateQuery/CreateQueryItem.vue +735 -733
  10. package/src/base-client/components/common/CreateSimpleFormQuery/CreateSimpleFormQuery.vue +466 -468
  11. package/src/base-client/components/common/CreateSimpleFormQuery/CreateSimpleFormQueryItem.vue +510 -508
  12. package/src/base-client/components/common/FormGroupEdit/FormGroupEdit.vue +144 -146
  13. package/src/base-client/components/common/FormGroupQuery/FormGroupQuery.vue +165 -165
  14. package/src/base-client/components/common/JSONToTree/jsontotree.vue +275 -275
  15. package/src/base-client/components/common/Upload/Upload.vue +168 -168
  16. package/src/base-client/components/common/XAddForm/XAddForm.vue +72 -325
  17. package/src/base-client/components/common/XAddNativeForm/XAddNativeForm.vue +369 -279
  18. package/src/base-client/components/common/XAddNativeForm/index.md +107 -17
  19. package/src/base-client/components/common/XCard/XCard.vue +64 -64
  20. package/src/base-client/components/common/XDataDrawer/XDataDrawer.vue +180 -0
  21. package/src/base-client/components/common/XDataDrawer/index.js +3 -0
  22. package/src/base-client/components/common/XDataDrawer/index.md +41 -0
  23. package/src/base-client/components/common/XForm/XForm.vue +178 -180
  24. package/src/base-client/components/common/XForm/XFormItem.vue +521 -513
  25. package/src/base-client/components/common/XForm/XTreeSelect.vue +184 -184
  26. package/src/base-client/components/common/XFormCol/XFormCol.vue +38 -38
  27. package/src/base-client/components/common/XFormTable/XFormTable.vue +356 -344
  28. package/src/base-client/components/common/XFormTable/index.md +97 -97
  29. package/src/base-client/components/common/XImportExcel/XImportExcel.vue +132 -132
  30. package/src/base-client/components/common/XTable/XTable.vue +519 -506
  31. package/src/base-client/components/common/XTreeOne/XTreeOne.vue +111 -111
  32. package/src/base-client/components/index.js +41 -0
  33. package/src/base-client/components/system/DictionaryDetailsView/DictionaryDetailsView.vue +231 -231
  34. package/src/base-client/components/system/QueryParamsDetailsView/QueryParamsDetailsView.vue +281 -281
  35. package/src/base-client/components/ticket/TicketDetailsView/TicketDetailsView.vue +807 -807
  36. package/src/base-client/components/ticket/TicketDetailsView/index.md +29 -29
  37. package/src/base-client/components/ticket/TicketDetailsView/part/TicketDetailsFlow.vue +260 -260
  38. package/src/base-client/components/ticket/TicketSubmitSuccessView/TicketSubmitSuccessView.vue +532 -532
  39. package/src/base-client/components/ticket/TicketSubmitSuccessView/index.md +29 -29
  40. package/src/base-client/plugins/AppData.js +76 -76
  41. package/src/base-client/plugins/GetLoginInfoService.js +179 -179
  42. package/src/base-client/plugins/PagedList.js +177 -177
  43. package/src/base-client/plugins/compatible/LoginServiceOA.js +20 -20
  44. package/src/base-client/plugins/i18n-extend.js +32 -32
  45. package/src/components/Ellipsis/Ellipsis.vue +65 -65
  46. package/src/components/Ellipsis/index.md +38 -38
  47. package/src/components/NumberInfo/index.md +43 -43
  48. package/src/components/STable/README.md +341 -341
  49. package/src/components/STable/index.js +318 -318
  50. package/src/components/Trend/index.md +45 -45
  51. package/src/components/checkbox/ColorCheckbox.vue +157 -157
  52. package/src/components/checkbox/ImgCheckbox.vue +163 -163
  53. package/src/components/exception/ExceptionPage.vue +70 -70
  54. package/src/components/form/FormRow.vue +52 -52
  55. package/src/components/index.js +36 -36
  56. package/src/components/menu/SideMenu.vue +75 -62
  57. package/src/components/menu/menu.js +273 -273
  58. package/src/components/page/header/index.less +40 -40
  59. package/src/components/setting/Setting.vue +235 -235
  60. package/src/components/table/StandardTable.vue +141 -141
  61. package/src/components/table/advance/ActionColumns.vue +158 -158
  62. package/src/components/table/advance/SearchArea.vue +355 -355
  63. package/src/components/tool/AStepItem.vue +60 -60
  64. package/src/components/tool/AvatarList.vue +68 -68
  65. package/src/components/tool/Drawer.vue +142 -142
  66. package/src/components/tool/TagSelect.vue +83 -83
  67. package/src/components/transition/PageToggleTransition.vue +97 -97
  68. package/src/config/CreateQueryConfig.js +307 -307
  69. package/src/config/default/admin.config.js +18 -18
  70. package/src/config/default/setting.config.js +4 -2
  71. package/src/config/replacer/resolve.config.js +67 -67
  72. package/src/layouts/CommonLayout.vue +42 -42
  73. package/src/layouts/ComponentLayoutOne.vue +47 -47
  74. package/src/layouts/PageLayout.vue +151 -151
  75. package/src/layouts/SinglePageView.vue +116 -116
  76. package/src/layouts/footer/PageFooter.vue +49 -49
  77. package/src/layouts/header/AdminHeader.vue +134 -134
  78. package/src/layouts/header/HeaderAvatar.vue +64 -64
  79. package/src/layouts/header/HeaderNotice.vue +176 -176
  80. package/src/layouts/header/HeaderSearch.vue +67 -67
  81. package/src/layouts/header/InstitutionDetail.vue +181 -181
  82. package/src/layouts/header/index.less +92 -92
  83. package/src/layouts/tabs/TabsHead.vue +190 -190
  84. package/src/layouts/tabs/TabsView.vue +379 -379
  85. package/src/lib.js +1 -0
  86. package/src/mock/goods/index.js +108 -108
  87. package/src/pages/CreateQueryPage.vue +84 -84
  88. package/src/pages/login/Login.vue +369 -369
  89. package/src/pages/report/ReportTable.js +124 -124
  90. package/src/pages/report/ReportTableHome.vue +28 -28
  91. package/src/pages/resourceManage/orgListManage.vue +98 -98
  92. package/src/pages/system/dictionary/index.vue +43 -43
  93. package/src/pages/system/file/index.vue +317 -317
  94. package/src/pages/system/monitor/loginInfor/index.vue +36 -36
  95. package/src/pages/system/monitor/operLog/index.vue +36 -36
  96. package/src/pages/system/settings/index.vue +126 -126
  97. package/src/pages/system/settings/modifyPassword.vue +109 -109
  98. package/src/router/async/config.async.js +28 -28
  99. package/src/router/async/router.map.js +66 -66
  100. package/src/router/guards.js +52 -12
  101. package/src/router/index.js +27 -27
  102. package/src/services/api/DictionaryDetailsViewApi.js +6 -6
  103. package/src/services/api/LogDetailsViewApi.js +10 -10
  104. package/src/services/api/QueryParamsDetailsViewApi.js +6 -6
  105. package/src/services/api/TicketDetailsViewApi.js +34 -34
  106. package/src/services/api/cas.js +79 -79
  107. package/src/services/api/common.js +137 -137
  108. package/src/services/api/commonTempTable.js +10 -10
  109. package/src/services/api/index.js +17 -17
  110. package/src/services/api/logininfor/index.js +6 -6
  111. package/src/services/api/manage.js +8 -8
  112. package/src/services/apiService.js +14 -14
  113. package/src/services/user.js +67 -67
  114. package/src/store/modules/index.js +4 -4
  115. package/src/theme/default/nprogress.less +76 -76
  116. package/src/theme/default/style.less +58 -58
  117. package/src/utils/EncryptUtil.js +53 -53
  118. package/src/utils/colors.js +107 -107
  119. package/src/utils/excel/Blob.js +180 -180
  120. package/src/utils/excel/Export2Excel.js +141 -141
  121. package/src/utils/formatter.js +68 -68
  122. package/src/utils/i18n.js +80 -80
  123. package/src/utils/login.js +138 -0
  124. package/src/utils/map-utils.js +37 -37
  125. package/src/utils/theme-color-replacer-extend.js +91 -91
  126. package/src/utils/themeUtil.js +100 -100
  127. package/src/utils/util.js +230 -230
  128. package/vue.config.js +106 -106
@@ -1,116 +1,116 @@
1
- <template>
2
- <page-toggle-transition :disabled="animate.disabled" :animate="animate.name" :direction="animate.direction">
3
- <template v-if="login">
4
- <a-spin tip="加载中,马上好" :spinning="!isLoaded">
5
- <a-card>
6
- <iframe
7
- ref="singlepage"
8
- :src="url"
9
- :name="this.fullPath"
10
- class="single-page-iframe"
11
- @load="load">
12
- </iframe>
13
- </a-card>
14
- </a-spin>
15
- </template>
16
- </page-toggle-transition>
17
- </template>
18
-
19
- <script>
20
- import PageToggleTransition from '@vue2-client/components/transition/PageToggleTransition'
21
- import { ACCESS_TOKEN } from '@vue2-client/store/mutation-types'
22
- import { mapState, mapMutations } from 'vuex'
23
- import { CASLogin, doOtherValidate } from '@vue2-client/services/api/cas'
24
-
25
- export default {
26
- name: 'SinglePageView',
27
- components: { PageToggleTransition },
28
- props: {
29
- singlePageUrl: {
30
- type: String,
31
- default: ''
32
- },
33
- fullPath: {
34
- type: String,
35
- default: ''
36
- }
37
- },
38
- data () {
39
- return {
40
- iframe: null,
41
- url: '',
42
- isLoaded: false,
43
- }
44
- },
45
- computed: {
46
- ...mapState('setting', ['animate', 'iframeSrc']),
47
- ...mapState('account', { login: 'login', currUser: 'user' })
48
- },
49
- created () {
50
- this.isLoaded = false
51
- if (this.singlePageUrl.indexOf('sso:') !== -1) {
52
- const serviceKey = this.singlePageUrl.substring(4)
53
- CASLogin(serviceKey, true).then(res => {
54
- const redirectUrl = res.redirectUrl
55
- if (redirectUrl.indexOf('logic@') !== -1) {
56
- const logicName = redirectUrl.substring(6)
57
- doOtherValidate(logicName, res.st, serviceKey).then(validateRes => {
58
- this.url = validateRes.redirectUrl
59
- })
60
- } else {
61
- const join = redirectUrl.split('?')[1] ? '&' : '?'
62
- this.url = redirectUrl + join + 'ticket=' + res.st + '&timestrap=' + new Date().getTime()
63
- }
64
- }).catch(msg => {
65
- console.warn(msg)
66
- this.$message.error(msg)
67
- })
68
- } else if (this.singlePageUrl.indexOf('http') !== -1) {
69
- if (this.singlePageUrl.indexOf('?goto=') !== -1) {
70
- this.singlePageUrl = this.singlePageUrl + '&f_user_id=' + this.currUser.username + '&password=' + this.currUser.password
71
- }
72
- this.url = this.singlePageUrl
73
- } else {
74
- this.url = this.iframeSrc
75
- }
76
- },
77
- mounted () {
78
- if (!this.login) {
79
- this.setLogin(JSON.parse(sessionStorage.getItem(process.env.VUE_APP_LOGIN_KEY)))
80
- }
81
- this.iframe = this.$refs.singlepage.contentWindow
82
- this.path = this.$route.path
83
- },
84
- methods: {
85
- ...mapMutations('account', ['setLogin']),
86
- load () {
87
- if (this.singlePageUrl.indexOf('sso:') === -1) {
88
- const appdata = {
89
- singleValues: this.$appdata.getSingleValues(),
90
- params: this.$appdata.getParams()
91
- }
92
- const data = {
93
- token: localStorage.getItem(ACCESS_TOKEN),
94
- login: this.login,
95
- appdata: appdata,
96
- page: this.singlePageUrl
97
- }
98
- console.log('发送参数', data)
99
- if (this.iframe) {
100
- this.iframe.postMessage(data, '*')
101
- }
102
- }
103
- this.$emit('load', this.fullPath)
104
- this.isLoaded = true
105
- }
106
- }
107
- }
108
- </script>
109
-
110
- <style lang="less">
111
- .single-page-iframe {
112
- width: 100%;
113
- height: calc(100vh - 117px);
114
- border: none;
115
- }
116
- </style>
1
+ <template>
2
+ <page-toggle-transition :disabled="animate.disabled" :animate="animate.name" :direction="animate.direction">
3
+ <template v-if="login">
4
+ <a-spin tip="加载中,马上好" :spinning="!isLoaded">
5
+ <a-card>
6
+ <iframe
7
+ ref="singlepage"
8
+ :src="url"
9
+ :name="this.fullPath"
10
+ class="single-page-iframe"
11
+ @load="load">
12
+ </iframe>
13
+ </a-card>
14
+ </a-spin>
15
+ </template>
16
+ </page-toggle-transition>
17
+ </template>
18
+
19
+ <script>
20
+ import PageToggleTransition from '@vue2-client/components/transition/PageToggleTransition'
21
+ import { ACCESS_TOKEN } from '@vue2-client/store/mutation-types'
22
+ import { mapState, mapMutations } from 'vuex'
23
+ import { CASLogin, doOtherValidate } from '@vue2-client/services/api/cas'
24
+
25
+ export default {
26
+ name: 'SinglePageView',
27
+ components: { PageToggleTransition },
28
+ props: {
29
+ singlePageUrl: {
30
+ type: String,
31
+ default: ''
32
+ },
33
+ fullPath: {
34
+ type: String,
35
+ default: ''
36
+ }
37
+ },
38
+ data () {
39
+ return {
40
+ iframe: null,
41
+ url: '',
42
+ isLoaded: false,
43
+ }
44
+ },
45
+ computed: {
46
+ ...mapState('setting', ['animate', 'iframeSrc']),
47
+ ...mapState('account', { login: 'login', currUser: 'user' })
48
+ },
49
+ created () {
50
+ this.isLoaded = false
51
+ if (this.singlePageUrl.indexOf('sso:') !== -1) {
52
+ const serviceKey = this.singlePageUrl.substring(4)
53
+ CASLogin(serviceKey, true).then(res => {
54
+ const redirectUrl = res.redirectUrl
55
+ if (redirectUrl.indexOf('logic@') !== -1) {
56
+ const logicName = redirectUrl.substring(6)
57
+ doOtherValidate(logicName, res.st, serviceKey).then(validateRes => {
58
+ this.url = validateRes.redirectUrl
59
+ })
60
+ } else {
61
+ const join = redirectUrl.split('?')[1] ? '&' : '?'
62
+ this.url = redirectUrl + join + 'ticket=' + res.st + '&timestrap=' + new Date().getTime()
63
+ }
64
+ }).catch(msg => {
65
+ console.warn(msg)
66
+ this.$message.error(msg)
67
+ })
68
+ } else if (this.singlePageUrl.indexOf('http') !== -1) {
69
+ if (this.singlePageUrl.indexOf('?goto=') !== -1) {
70
+ this.singlePageUrl = this.singlePageUrl + '&f_user_id=' + this.currUser.username + '&password=' + this.currUser.password
71
+ }
72
+ this.url = this.singlePageUrl
73
+ } else {
74
+ this.url = this.iframeSrc
75
+ }
76
+ },
77
+ mounted () {
78
+ if (!this.login) {
79
+ this.setLogin(JSON.parse(sessionStorage.getItem(process.env.VUE_APP_LOGIN_KEY)))
80
+ }
81
+ this.iframe = this.$refs.singlepage.contentWindow
82
+ this.path = this.$route.path
83
+ },
84
+ methods: {
85
+ ...mapMutations('account', ['setLogin']),
86
+ load () {
87
+ if (this.singlePageUrl.indexOf('sso:') === -1) {
88
+ const appdata = {
89
+ singleValues: this.$appdata.getSingleValues(),
90
+ params: this.$appdata.getParams()
91
+ }
92
+ const data = {
93
+ token: localStorage.getItem(ACCESS_TOKEN),
94
+ login: this.login,
95
+ appdata: appdata,
96
+ page: this.singlePageUrl
97
+ }
98
+ console.log('发送参数', data)
99
+ if (this.iframe) {
100
+ this.iframe.postMessage(data, '*')
101
+ }
102
+ }
103
+ this.$emit('load', this.fullPath)
104
+ this.isLoaded = true
105
+ }
106
+ }
107
+ }
108
+ </script>
109
+
110
+ <style lang="less">
111
+ .single-page-iframe {
112
+ width: 100%;
113
+ height: calc(100vh - 117px);
114
+ border: none;
115
+ }
116
+ </style>
@@ -1,49 +1,49 @@
1
- <template>
2
- <div class="footer">
3
- <div class="links">
4
- <a target="_blank" :key="index" :href="item.link ? item.link : 'javascript: void(0)'" v-for="(item, index) in linkList">
5
- <a-icon v-if="item.icon" :type="item.icon"/>{{ item.name }}
6
- </a>
7
- </div>
8
- <div class="copyright" v-if="!copyrightStyle">
9
- Copyright<a-icon type="copyright" />{{ copyright }}
10
- </div>
11
- <div class="copyright2" :style="copyrightStyle" v-else>
12
- {{ copyright }}
13
- </div>
14
- </div>
15
- </template>
16
-
17
- <script>
18
- export default {
19
- name: 'PageFooter',
20
- // eslint-disable-next-line vue/require-prop-types
21
- props: ['copyright', 'linkList', 'copyrightStyle']
22
- }
23
- </script>
24
-
25
- <style lang="less" scoped>
26
- .footer{
27
- padding: 48px 16px 24px;
28
- /*margin: 48px 0 24px;*/
29
- text-align: center;
30
- .copyright{
31
- color: @text-color-second;
32
- font-size: 14px;
33
- i {
34
- margin: 0 4px;
35
- }
36
- }
37
- .links{
38
- margin-bottom: 8px;
39
- a:not(:last-child) {
40
- margin-right: 40px;
41
- }
42
- a{
43
- color: @text-color-second;
44
- -webkit-transition: all .3s;
45
- transition: all .3s;
46
- }
47
- }
48
- }
49
- </style>
1
+ <template>
2
+ <div class="footer">
3
+ <div class="links">
4
+ <a target="_blank" :key="index" :href="item.link ? item.link : 'javascript: void(0)'" v-for="(item, index) in linkList">
5
+ <a-icon v-if="item.icon" :type="item.icon"/>{{ item.name }}
6
+ </a>
7
+ </div>
8
+ <div class="copyright" v-if="!copyrightStyle">
9
+ Copyright<a-icon type="copyright" />{{ copyright }}
10
+ </div>
11
+ <div class="copyright2" :style="copyrightStyle" v-else>
12
+ {{ copyright }}
13
+ </div>
14
+ </div>
15
+ </template>
16
+
17
+ <script>
18
+ export default {
19
+ name: 'PageFooter',
20
+ // eslint-disable-next-line vue/require-prop-types
21
+ props: ['copyright', 'linkList', 'copyrightStyle']
22
+ }
23
+ </script>
24
+
25
+ <style lang="less" scoped>
26
+ .footer{
27
+ padding: 48px 16px 24px;
28
+ /*margin: 48px 0 24px;*/
29
+ text-align: center;
30
+ .copyright{
31
+ color: @text-color-second;
32
+ font-size: 14px;
33
+ i {
34
+ margin: 0 4px;
35
+ }
36
+ }
37
+ .links{
38
+ margin-bottom: 8px;
39
+ a:not(:last-child) {
40
+ margin-right: 40px;
41
+ }
42
+ a{
43
+ color: @text-color-second;
44
+ -webkit-transition: all .3s;
45
+ transition: all .3s;
46
+ }
47
+ }
48
+ }
49
+ </style>
@@ -1,134 +1,134 @@
1
- <template>
2
- <a-layout-header :class="[headerTheme, 'admin-header']">
3
- <div :class="['admin-header-wide', layout, pageWidth]">
4
- <router-link v-if="isMobile || layout === 'head'" :class="['logo', isMobile ? null : 'pc', headerTheme]" to="/">
5
- <img :src="logoSrc" width="32" alt="logo"/>
6
- <h1 v-if="!isMobile">{{ systemName }}</h1>
7
- </router-link>
8
- <a-divider v-if="isMobile" type="vertical" />
9
- <a-icon v-if="layout !== 'head'" :type="collapsed ? 'menu-unfold' : 'menu-fold'" class="trigger" @click="toggleCollapse"/>
10
- <div v-if="layout !== 'side' && !isMobile" :style="`width: ${menuWidth};`" class="admin-header-menu">
11
- <i-menu :options="menuData" :theme="headerTheme" class="head-menu" mode="horizontal" @select="onSelect"/>
12
- </div>
13
- <div :class="['admin-header-right', headerTheme]">
14
- <component class="header-item" :is="dynamicComponents['HeaderSearch']" @active="val => searchActive = val"/>
15
- <a-tooltip class="header-item" placement="bottom" title="清理查询缓存" >
16
- <a @click="handleToClearCache">
17
- <a-icon type="reload" />
18
- </a>
19
- </a-tooltip>
20
- <component class="header-item" :is="dynamicComponents['HeaderNotice']"/>
21
- <header-avatar class="header-item"/>
22
- <a-dropdown class="lang header-item">
23
- <div>
24
- <a-icon type="global"/> {{ langAlias }}
25
- </div>
26
- <a-menu slot="overlay" :selected-keys="[lang]" @click="val => setLang(val.key)">
27
- <a-menu-item v-for=" lang in langList" :key="lang.key">{{ lang.key.toLowerCase() + ' ' + lang.name }}</a-menu-item>
28
- </a-menu>
29
- </a-dropdown>
30
- </div>
31
- </div>
32
- </a-layout-header>
33
- </template>
34
-
35
- <script>
36
- import HeaderSearch from './HeaderSearch'
37
- import HeaderAvatar from './HeaderAvatar'
38
- import IMenu from '@vue2-client/components/menu/menu'
39
- import { mapState, mapMutations } from 'vuex'
40
- import { Modal } from 'ant-design-vue'
41
- import { indexedDB } from '@vue2-client/utils/indexedDB'
42
-
43
- const loadComponents = (value) => {
44
- const component = {
45
- HeaderSearch: import('./HeaderSearch'),
46
- HeaderNotice: import('./HeaderNotice'),
47
- }
48
- if (!value) {
49
- return component
50
- }
51
- for (const item in component) {
52
- const path = value[item]
53
- if (path) {
54
- component[item] = import(`@/layouts/header/${path}`)
55
- }
56
- }
57
- return component
58
- }
59
-
60
- export default {
61
- name: 'AdminHeader',
62
- components: { IMenu, HeaderAvatar, HeaderSearch },
63
- // eslint-disable-next-line vue/require-prop-types
64
- props: ['collapsed', 'menuData'],
65
- data () {
66
- return {
67
- langList: [
68
- { key: 'CN', name: '简体中文', alias: '简体' },
69
- { key: 'HK', name: '繁體中文', alias: '繁體' },
70
- { key: 'US', name: 'English', alias: 'English' }
71
- ],
72
- searchActive: false,
73
- dynamicComponents: {}
74
- }
75
- },
76
- computed: {
77
- ...mapState('setting', ['theme', 'isMobile', 'layout', 'systemName', 'logoSrc', 'lang', 'pageWidth', 'customizeComponent']),
78
- headerTheme () {
79
- if (this.layout === 'side' && this.theme.mode === 'dark' && !this.isMobile) {
80
- return 'light'
81
- }
82
- return this.theme.mode
83
- },
84
- langAlias () {
85
- const lang = this.langList.find(item => item.key === this.lang)
86
- return lang.alias
87
- },
88
- menuWidth () {
89
- const { layout, searchActive } = this
90
- const headWidth = layout === 'head' ? '100% - 188px' : '100%'
91
- const extraWidth = searchActive ? '600px' : '400px'
92
- return `calc(${headWidth} - ${extraWidth})`
93
- }
94
- },
95
- created () {
96
- const components = loadComponents(this.customizeComponent)
97
- for (const item in components) {
98
- const value = components[item]
99
- if (typeof value === 'function') {
100
- this.$set(this.dynamicComponents, item, value)
101
- } else {
102
- components[item].then(result => {
103
- this.$set(this.dynamicComponents, item, result.default)
104
- })
105
- }
106
- }
107
- },
108
- methods: {
109
- toggleCollapse () {
110
- this.$emit('toggleCollapse')
111
- },
112
- onSelect (obj) {
113
- this.$emit('menuSelect', obj)
114
- },
115
- handleToClearCache () {
116
- Modal.confirm({
117
- title: '信息',
118
- content: '您确定要清除查询配置缓存吗?',
119
- onOk: () => {
120
- indexedDB.clear(() => {
121
- location.reload()
122
- })
123
- },
124
- onCancel () {}
125
- })
126
- },
127
- ...mapMutations('setting', ['setLang'])
128
- }
129
- }
130
- </script>
131
-
132
- <style lang="less" scoped>
133
- @import "index";
134
- </style>
1
+ <template>
2
+ <a-layout-header :class="[headerTheme, 'admin-header']">
3
+ <div :class="['admin-header-wide', layout, pageWidth]">
4
+ <router-link v-if="isMobile || layout === 'head'" :class="['logo', isMobile ? null : 'pc', headerTheme]" to="/">
5
+ <img :src="logoSrc" width="32" alt="logo"/>
6
+ <h1 v-if="!isMobile">{{ systemName }}</h1>
7
+ </router-link>
8
+ <a-divider v-if="isMobile" type="vertical" />
9
+ <a-icon v-if="layout !== 'head'" :type="collapsed ? 'menu-unfold' : 'menu-fold'" class="trigger" @click="toggleCollapse"/>
10
+ <div v-if="layout !== 'side' && !isMobile" :style="`width: ${menuWidth};`" class="admin-header-menu">
11
+ <i-menu :options="menuData" :theme="headerTheme" class="head-menu" mode="horizontal" @select="onSelect"/>
12
+ </div>
13
+ <div :class="['admin-header-right', headerTheme]">
14
+ <component class="header-item" :is="dynamicComponents['HeaderSearch']" @active="val => searchActive = val"/>
15
+ <a-tooltip class="header-item" placement="bottom" title="清理查询缓存" >
16
+ <a @click="handleToClearCache">
17
+ <a-icon type="reload" />
18
+ </a>
19
+ </a-tooltip>
20
+ <component class="header-item" :is="dynamicComponents['HeaderNotice']"/>
21
+ <header-avatar class="header-item"/>
22
+ <a-dropdown class="lang header-item">
23
+ <div>
24
+ <a-icon type="global"/> {{ langAlias }}
25
+ </div>
26
+ <a-menu slot="overlay" :selected-keys="[lang]" @click="val => setLang(val.key)">
27
+ <a-menu-item v-for=" lang in langList" :key="lang.key">{{ lang.key.toLowerCase() + ' ' + lang.name }}</a-menu-item>
28
+ </a-menu>
29
+ </a-dropdown>
30
+ </div>
31
+ </div>
32
+ </a-layout-header>
33
+ </template>
34
+
35
+ <script>
36
+ import HeaderSearch from './HeaderSearch'
37
+ import HeaderAvatar from './HeaderAvatar'
38
+ import IMenu from '@vue2-client/components/menu/menu'
39
+ import { mapState, mapMutations } from 'vuex'
40
+ import { Modal } from 'ant-design-vue'
41
+ import { indexedDB } from '@vue2-client/utils/indexedDB'
42
+
43
+ const loadComponents = (value) => {
44
+ const component = {
45
+ HeaderSearch: import('./HeaderSearch'),
46
+ HeaderNotice: import('./HeaderNotice'),
47
+ }
48
+ if (!value) {
49
+ return component
50
+ }
51
+ for (const item in component) {
52
+ const path = value[item]
53
+ if (path) {
54
+ component[item] = import(`@/layouts/header/${path}`)
55
+ }
56
+ }
57
+ return component
58
+ }
59
+
60
+ export default {
61
+ name: 'AdminHeader',
62
+ components: { IMenu, HeaderAvatar, HeaderSearch },
63
+ // eslint-disable-next-line vue/require-prop-types
64
+ props: ['collapsed', 'menuData'],
65
+ data () {
66
+ return {
67
+ langList: [
68
+ { key: 'CN', name: '简体中文', alias: '简体' },
69
+ { key: 'HK', name: '繁體中文', alias: '繁體' },
70
+ { key: 'US', name: 'English', alias: 'English' }
71
+ ],
72
+ searchActive: false,
73
+ dynamicComponents: {}
74
+ }
75
+ },
76
+ computed: {
77
+ ...mapState('setting', ['theme', 'isMobile', 'layout', 'systemName', 'logoSrc', 'lang', 'pageWidth', 'customizeComponent']),
78
+ headerTheme () {
79
+ if (this.layout === 'side' && this.theme.mode === 'dark' && !this.isMobile) {
80
+ return 'light'
81
+ }
82
+ return this.theme.mode
83
+ },
84
+ langAlias () {
85
+ const lang = this.langList.find(item => item.key === this.lang)
86
+ return lang.alias
87
+ },
88
+ menuWidth () {
89
+ const { layout, searchActive } = this
90
+ const headWidth = layout === 'head' ? '100% - 188px' : '100%'
91
+ const extraWidth = searchActive ? '600px' : '400px'
92
+ return `calc(${headWidth} - ${extraWidth})`
93
+ }
94
+ },
95
+ created () {
96
+ const components = loadComponents(this.customizeComponent)
97
+ for (const item in components) {
98
+ const value = components[item]
99
+ if (typeof value === 'function') {
100
+ this.$set(this.dynamicComponents, item, value)
101
+ } else {
102
+ components[item].then(result => {
103
+ this.$set(this.dynamicComponents, item, result.default)
104
+ })
105
+ }
106
+ }
107
+ },
108
+ methods: {
109
+ toggleCollapse () {
110
+ this.$emit('toggleCollapse')
111
+ },
112
+ onSelect (obj) {
113
+ this.$emit('menuSelect', obj)
114
+ },
115
+ handleToClearCache () {
116
+ Modal.confirm({
117
+ title: '信息',
118
+ content: '您确定要清除查询配置缓存吗?',
119
+ onOk: () => {
120
+ indexedDB.clear(() => {
121
+ location.reload()
122
+ })
123
+ },
124
+ onCancel () {}
125
+ })
126
+ },
127
+ ...mapMutations('setting', ['setLang'])
128
+ }
129
+ }
130
+ </script>
131
+
132
+ <style lang="less" scoped>
133
+ @import "index";
134
+ </style>