vue2-client 1.7.0 → 1.7.1

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 (126) hide show
  1. package/.env +15 -15
  2. package/CHANGELOG.md +31 -1
  3. package/Components.md +60 -0
  4. package/index.js +39 -30
  5. package/package.json +4 -2
  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 +365 -279
  18. package/src/base-client/components/common/XAddNativeForm/index.md +96 -56
  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/system/DictionaryDetailsView/DictionaryDetailsView.vue +231 -231
  33. package/src/base-client/components/system/QueryParamsDetailsView/QueryParamsDetailsView.vue +281 -281
  34. package/src/base-client/components/ticket/TicketDetailsView/TicketDetailsView.vue +807 -807
  35. package/src/base-client/components/ticket/TicketDetailsView/index.md +29 -29
  36. package/src/base-client/components/ticket/TicketDetailsView/part/TicketDetailsFlow.vue +260 -260
  37. package/src/base-client/components/ticket/TicketSubmitSuccessView/TicketSubmitSuccessView.vue +532 -532
  38. package/src/base-client/components/ticket/TicketSubmitSuccessView/index.md +29 -29
  39. package/src/base-client/plugins/AppData.js +76 -76
  40. package/src/base-client/plugins/GetLoginInfoService.js +179 -179
  41. package/src/base-client/plugins/PagedList.js +177 -177
  42. package/src/base-client/plugins/compatible/LoginServiceOA.js +20 -20
  43. package/src/base-client/plugins/i18n-extend.js +32 -32
  44. package/src/components/Ellipsis/Ellipsis.vue +65 -65
  45. package/src/components/Ellipsis/index.md +38 -38
  46. package/src/components/NumberInfo/index.md +43 -43
  47. package/src/components/STable/README.md +341 -341
  48. package/src/components/STable/index.js +318 -318
  49. package/src/components/Trend/index.md +45 -45
  50. package/src/components/checkbox/ColorCheckbox.vue +157 -157
  51. package/src/components/checkbox/ImgCheckbox.vue +163 -163
  52. package/src/components/exception/ExceptionPage.vue +70 -70
  53. package/src/components/form/FormRow.vue +52 -52
  54. package/src/components/index.js +36 -36
  55. package/src/components/menu/SideMenu.vue +62 -62
  56. package/src/components/menu/menu.js +273 -273
  57. package/src/components/page/header/index.less +40 -40
  58. package/src/components/setting/Setting.vue +235 -235
  59. package/src/components/table/StandardTable.vue +141 -141
  60. package/src/components/table/advance/ActionColumns.vue +158 -158
  61. package/src/components/table/advance/SearchArea.vue +355 -355
  62. package/src/components/tool/AStepItem.vue +60 -60
  63. package/src/components/tool/AvatarList.vue +68 -68
  64. package/src/components/tool/Drawer.vue +142 -142
  65. package/src/components/tool/TagSelect.vue +83 -83
  66. package/src/components/transition/PageToggleTransition.vue +97 -97
  67. package/src/config/CreateQueryConfig.js +307 -307
  68. package/src/config/default/admin.config.js +18 -18
  69. package/src/config/default/setting.config.js +3 -1
  70. package/src/config/replacer/resolve.config.js +67 -67
  71. package/src/layouts/CommonLayout.vue +42 -42
  72. package/src/layouts/ComponentLayoutOne.vue +47 -47
  73. package/src/layouts/PageLayout.vue +151 -151
  74. package/src/layouts/SinglePageView.vue +116 -116
  75. package/src/layouts/footer/PageFooter.vue +49 -49
  76. package/src/layouts/header/AdminHeader.vue +134 -134
  77. package/src/layouts/header/HeaderAvatar.vue +64 -64
  78. package/src/layouts/header/HeaderNotice.vue +176 -176
  79. package/src/layouts/header/HeaderSearch.vue +67 -67
  80. package/src/layouts/header/InstitutionDetail.vue +181 -181
  81. package/src/layouts/header/index.less +92 -92
  82. package/src/layouts/tabs/TabsHead.vue +190 -190
  83. package/src/layouts/tabs/TabsView.vue +379 -379
  84. package/src/mock/goods/index.js +108 -108
  85. package/src/pages/CreateQueryPage.vue +84 -84
  86. package/src/pages/login/Login.vue +369 -369
  87. package/src/pages/report/ReportTable.js +124 -124
  88. package/src/pages/report/ReportTableHome.vue +28 -28
  89. package/src/pages/resourceManage/orgListManage.vue +98 -98
  90. package/src/pages/system/dictionary/index.vue +43 -43
  91. package/src/pages/system/file/index.vue +317 -317
  92. package/src/pages/system/monitor/loginInfor/index.vue +36 -36
  93. package/src/pages/system/monitor/operLog/index.vue +36 -36
  94. package/src/pages/system/settings/index.vue +126 -126
  95. package/src/pages/system/settings/modifyPassword.vue +109 -109
  96. package/src/router/async/config.async.js +28 -28
  97. package/src/router/async/router.map.js +66 -66
  98. package/src/router/guards.js +52 -12
  99. package/src/router/index.js +27 -27
  100. package/src/services/api/DictionaryDetailsViewApi.js +6 -6
  101. package/src/services/api/LogDetailsViewApi.js +10 -10
  102. package/src/services/api/QueryParamsDetailsViewApi.js +6 -6
  103. package/src/services/api/TicketDetailsViewApi.js +34 -34
  104. package/src/services/api/cas.js +79 -79
  105. package/src/services/api/common.js +137 -137
  106. package/src/services/api/commonTempTable.js +10 -10
  107. package/src/services/api/index.js +17 -17
  108. package/src/services/api/logininfor/index.js +6 -6
  109. package/src/services/api/manage.js +8 -8
  110. package/src/services/apiService.js +14 -14
  111. package/src/services/user.js +67 -67
  112. package/src/store/modules/index.js +4 -4
  113. package/src/theme/default/nprogress.less +76 -76
  114. package/src/theme/default/style.less +58 -58
  115. package/src/utils/EncryptUtil.js +53 -53
  116. package/src/utils/colors.js +107 -107
  117. package/src/utils/excel/Blob.js +180 -180
  118. package/src/utils/excel/Export2Excel.js +141 -141
  119. package/src/utils/formatter.js +68 -68
  120. package/src/utils/i18n.js +80 -80
  121. package/src/utils/login.js +138 -0
  122. package/src/utils/map-utils.js +37 -37
  123. package/src/utils/theme-color-replacer-extend.js +91 -91
  124. package/src/utils/themeUtil.js +100 -100
  125. package/src/utils/util.js +230 -230
  126. 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>