vue2-client 1.4.36 → 1.4.38

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 (97) hide show
  1. package/CHANGELOG.md +442 -434
  2. package/index.js +30 -30
  3. package/package.json +78 -78
  4. package/src/base-client/components/common/AddressSearchCombobox/AddressSearchCombobox.vue +225 -225
  5. package/src/base-client/components/common/CreateQuery/CreateQueryItem.vue +777 -777
  6. package/src/base-client/components/common/FormGroupQuery/FormGroupQuery.vue +165 -165
  7. package/src/base-client/components/common/JSONToTree/jsontotree.vue +275 -275
  8. package/src/base-client/components/common/XAddForm/XAddForm.vue +354 -354
  9. package/src/base-client/components/common/XAddNativeForm/XAddNativeForm.vue +327 -327
  10. package/src/base-client/components/common/XCard/XCard.vue +64 -64
  11. package/src/base-client/components/common/XForm/XForm.vue +274 -274
  12. package/src/base-client/components/common/XFormTable/index.md +96 -96
  13. package/src/base-client/components/system/QueryParamsDetailsView/QueryParamsDetailsView.vue +281 -281
  14. package/src/base-client/components/ticket/TicketDetailsView/TicketDetailsView.vue +807 -807
  15. package/src/base-client/components/ticket/TicketDetailsView/index.md +29 -29
  16. package/src/base-client/components/ticket/TicketDetailsView/part/TicketDetailsFlow.vue +260 -260
  17. package/src/base-client/components/ticket/TicketSubmitSuccessView/TicketSubmitSuccessView.vue +532 -532
  18. package/src/base-client/components/ticket/TicketSubmitSuccessView/index.md +29 -29
  19. package/src/base-client/plugins/AppData.js +73 -73
  20. package/src/base-client/plugins/GetLoginInfoService.js +179 -179
  21. package/src/base-client/plugins/PagedList.js +177 -177
  22. package/src/base-client/plugins/compatible/LoginServiceOA.js +20 -20
  23. package/src/base-client/plugins/i18n-extend.js +32 -32
  24. package/src/components/Ellipsis/index.md +38 -38
  25. package/src/components/FileImageItem/FileItem.vue +60 -0
  26. package/src/components/FileImageItem/ImageItem.vue +78 -0
  27. package/src/components/FileImageItem/index.js +4 -0
  28. package/src/components/FilePreview/FilePreview.vue +110 -0
  29. package/src/components/FilePreview/index.js +3 -0
  30. package/src/components/NumberInfo/index.md +43 -43
  31. package/src/components/STable/README.md +341 -341
  32. package/src/components/STable/index.js +318 -318
  33. package/src/components/Trend/index.md +45 -45
  34. package/src/components/checkbox/ColorCheckbox.vue +157 -157
  35. package/src/components/checkbox/ImgCheckbox.vue +163 -163
  36. package/src/components/form/FormRow.vue +52 -52
  37. package/src/components/index.js +36 -36
  38. package/src/components/menu/SideMenu.vue +62 -62
  39. package/src/components/menu/menu.js +273 -273
  40. package/src/components/page/header/index.less +40 -40
  41. package/src/components/setting/Setting.vue +235 -235
  42. package/src/components/table/StandardTable.vue +141 -141
  43. package/src/components/table/advance/ActionColumns.vue +158 -158
  44. package/src/components/table/advance/SearchArea.vue +355 -355
  45. package/src/components/tool/AStepItem.vue +60 -60
  46. package/src/components/tool/AvatarList.vue +68 -68
  47. package/src/components/tool/Drawer.vue +142 -142
  48. package/src/components/tool/TagSelect.vue +83 -83
  49. package/src/components/transition/PageToggleTransition.vue +97 -97
  50. package/src/config/replacer/resolve.config.js +67 -67
  51. package/src/layouts/AdminLayout.vue +174 -174
  52. package/src/layouts/PageLayout.vue +151 -151
  53. package/src/layouts/SinglePageView.vue +105 -105
  54. package/src/layouts/header/AdminHeader.vue +104 -104
  55. package/src/layouts/header/HeaderNotice.vue +167 -167
  56. package/src/layouts/header/HeaderSearch.vue +67 -67
  57. package/src/layouts/header/InstitutionDetail.vue +181 -181
  58. package/src/layouts/header/index.less +92 -92
  59. package/src/layouts/tabs/TabsHead.vue +190 -190
  60. package/src/layouts/tabs/TabsView.vue +379 -379
  61. package/src/mock/goods/index.js +108 -108
  62. package/src/pages/CreateQueryPage.vue +65 -65
  63. package/src/pages/login/Login.vue +345 -345
  64. package/src/pages/report/ReportTable.js +124 -124
  65. package/src/pages/report/ReportTableHome.vue +28 -28
  66. package/src/pages/resourceManage/orgListManage.vue +98 -98
  67. package/src/pages/system/dictionary/index.vue +43 -43
  68. package/src/pages/system/file/index.vue +317 -317
  69. package/src/pages/system/monitor/loginInfor/index.vue +36 -36
  70. package/src/pages/system/monitor/operLog/index.vue +36 -36
  71. package/src/pages/system/queryParams/index.vue +43 -43
  72. package/src/pages/system/ticket/submitTicketSuccess.vue +46 -3
  73. package/src/router/async/config.async.js +27 -27
  74. package/src/router/async/router.map.js +65 -65
  75. package/src/router/index.js +27 -27
  76. package/src/services/api/DictionaryDetailsViewApi.js +6 -6
  77. package/src/services/api/LogDetailsViewApi.js +10 -10
  78. package/src/services/api/QueryParamsDetailsViewApi.js +6 -6
  79. package/src/services/api/TicketDetailsViewApi.js +34 -34
  80. package/src/services/api/cas.js +79 -79
  81. package/src/services/api/commonTempTable.js +10 -10
  82. package/src/services/api/index.js +17 -17
  83. package/src/services/api/manage.js +8 -8
  84. package/src/services/apiService.js +13 -13
  85. package/src/services/user.js +53 -53
  86. package/src/store/modules/index.js +4 -4
  87. package/src/theme/default/nprogress.less +76 -76
  88. package/src/theme/default/style.less +47 -47
  89. package/src/utils/colors.js +103 -103
  90. package/src/utils/excel/Blob.js +180 -180
  91. package/src/utils/excel/Export2Excel.js +141 -141
  92. package/src/utils/formatter.js +68 -68
  93. package/src/utils/i18n.js +80 -80
  94. package/src/utils/routerUtil.js +364 -364
  95. package/src/utils/theme-color-replacer-extend.js +91 -91
  96. package/src/utils/themeUtil.js +100 -100
  97. package/src/utils/util.js +230 -230
package/index.js CHANGED
@@ -1,30 +1,30 @@
1
- import Vue from 'vue'
2
- import { initRouter } from '@vue2-client/router'
3
- import { initI18n } from '@vue2-client/utils/i18n'
4
- import bootstrap from '@vue2-client/bootstrap'
5
- import { modules } from '@vue2-client/store'
6
- import '@vue2-client/theme/index.less'
7
- import '@vue2-client/utils/filter'
8
- import 'animate.css/source/animate.css'
9
- import 'moment/locale/zh-cn'
10
- import Antd from 'ant-design-vue'
11
- import Viser from 'viser-vue'
12
- // 插件
13
- import Plugins from '@vue2-client/base-client/plugins'
14
-
15
- const routerOptions = initRouter()
16
- const i18n = initI18n('CN', 'US')
17
-
18
- Vue.use(Antd)
19
- Vue.use(Viser)
20
- Vue.use(Plugins)
21
- Vue.config.productionTip = false
22
- const message = Vue.prototype.$message
23
-
24
- export {
25
- routerOptions,
26
- modules,
27
- i18n,
28
- message,
29
- bootstrap
30
- }
1
+ import Vue from 'vue'
2
+ import { initRouter } from '@vue2-client/router'
3
+ import { initI18n } from '@vue2-client/utils/i18n'
4
+ import bootstrap from '@vue2-client/bootstrap'
5
+ import { modules } from '@vue2-client/store'
6
+ import '@vue2-client/theme/index.less'
7
+ import '@vue2-client/utils/filter'
8
+ import 'animate.css/source/animate.css'
9
+ import 'moment/locale/zh-cn'
10
+ import Antd from 'ant-design-vue'
11
+ import Viser from 'viser-vue'
12
+ // 插件
13
+ import Plugins from '@vue2-client/base-client/plugins'
14
+
15
+ const routerOptions = initRouter()
16
+ const i18n = initI18n('CN', 'US')
17
+
18
+ Vue.use(Antd)
19
+ Vue.use(Viser)
20
+ Vue.use(Plugins)
21
+ Vue.config.productionTip = false
22
+ const message = Vue.prototype.$message
23
+
24
+ export {
25
+ routerOptions,
26
+ modules,
27
+ i18n,
28
+ message,
29
+ bootstrap
30
+ }
package/package.json CHANGED
@@ -1,78 +1,78 @@
1
- {
2
- "name": "vue2-client",
3
- "version": "1.4.36",
4
- "private": false,
5
- "scripts": {
6
- "serve": "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/g2plot": "^2.4.20",
16
- "lodash.get": "^4.4.2",
17
- "js-base64": "^3.7.2",
18
- "jsencrypt": "^3.2.1",
19
- "vue-json-viewer": "^2.2.22",
20
- "xlsx": "0.18.5",
21
- "file-saver": "^2.0.5",
22
- "@vue/babel-preset-jsx": "^1.4.0",
23
- "@antv/data-set": "^0.11.8",
24
- "animate.css": "^4.1.1",
25
- "ant-design-vue": "^1.7.8",
26
- "axios": "^0.27.2",
27
- "clipboard": "^2.0.11",
28
- "core-js": "^3.23.5",
29
- "date-fns": "^2.28.0",
30
- "default-passive-events": "^2.0.0",
31
- "enquire.js": "^2.1.6",
32
- "highlight.js": "^10.7.3",
33
- "js-cookie": "^2.2.1",
34
- "mockjs": "^1.1.0",
35
- "nprogress": "^0.2.0",
36
- "viser-vue": "^2.4.8",
37
- "vue": "2.6.14",
38
- "vue-i18n": "^8.27.2",
39
- "vue-router": "^3.5.4",
40
- "vuedraggable": "^2.24.3",
41
- "vuex": "^3.6.2"
42
- },
43
- "devDependencies": {
44
- "script-loader": "^0.7.2",
45
- "@ant-design/colors": "^6.0.0",
46
- "@babel/core": "^7.18.10",
47
- "@vue/cli-plugin-babel": "^4.5.19",
48
- "@vue/cli-plugin-eslint": "^4.5.19",
49
- "@vue/cli-service": "^4.5.19",
50
- "@vue/eslint-config-standard": "^4.0.0",
51
- "@vuepress/plugin-back-to-top": "^1.9.7",
52
- "babel-eslint": "^10.1.0",
53
- "babel-plugin-transform-remove-console": "^6.9.4",
54
- "babel-polyfill": "^6.26.0",
55
- "compression-webpack-plugin": "^4.0.1",
56
- "deepmerge": "^4.2.2",
57
- "eslint": "^6.8.0",
58
- "eslint-plugin-import": "^2.26.0",
59
- "eslint-plugin-node": "^11.1.0",
60
- "eslint-plugin-vue": "^6.2.2",
61
- "eslint-plugin-promise": "^4.3.1",
62
- "eslint-plugin-standard": "^4.1.0",
63
- "fast-deep-equal": "^3.1.3",
64
- "less-loader": "^6.2.0",
65
- "style-resources-loader": "^1.5.0",
66
- "vue-cli-plugin-style-resources-loader": "^0.1.5",
67
- "vue-template-compiler": "2.6.14",
68
- "vuepress": "^1.9.7",
69
- "webpack": "^4.46.0",
70
- "webpack-theme-color-replacer": "1.4.1",
71
- "whatwg-fetch": "^3.6.2"
72
- },
73
- "browserslist": [
74
- "> 1%",
75
- "last 2 versions",
76
- "not ie <= 10"
77
- ]
78
- }
1
+ {
2
+ "name": "vue2-client",
3
+ "version": "1.4.38",
4
+ "private": false,
5
+ "scripts": {
6
+ "serve": "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/g2plot": "^2.4.20",
16
+ "lodash.get": "^4.4.2",
17
+ "js-base64": "^3.7.2",
18
+ "jsencrypt": "^3.2.1",
19
+ "vue-json-viewer": "^2.2.22",
20
+ "xlsx": "0.18.5",
21
+ "file-saver": "^2.0.5",
22
+ "@vue/babel-preset-jsx": "^1.4.0",
23
+ "@antv/data-set": "^0.11.8",
24
+ "animate.css": "^4.1.1",
25
+ "ant-design-vue": "^1.7.8",
26
+ "axios": "^0.27.2",
27
+ "clipboard": "^2.0.11",
28
+ "core-js": "^3.23.5",
29
+ "date-fns": "^2.28.0",
30
+ "default-passive-events": "^2.0.0",
31
+ "enquire.js": "^2.1.6",
32
+ "highlight.js": "^10.7.3",
33
+ "js-cookie": "^2.2.1",
34
+ "mockjs": "^1.1.0",
35
+ "nprogress": "^0.2.0",
36
+ "viser-vue": "^2.4.8",
37
+ "vue": "2.6.14",
38
+ "vue-i18n": "^8.27.2",
39
+ "vue-router": "^3.5.4",
40
+ "vuedraggable": "^2.24.3",
41
+ "vuex": "^3.6.2"
42
+ },
43
+ "devDependencies": {
44
+ "script-loader": "^0.7.2",
45
+ "@ant-design/colors": "^6.0.0",
46
+ "@babel/core": "^7.18.10",
47
+ "@vue/cli-plugin-babel": "^4.5.19",
48
+ "@vue/cli-plugin-eslint": "^4.5.19",
49
+ "@vue/cli-service": "^4.5.19",
50
+ "@vue/eslint-config-standard": "^4.0.0",
51
+ "@vuepress/plugin-back-to-top": "^1.9.7",
52
+ "babel-eslint": "^10.1.0",
53
+ "babel-plugin-transform-remove-console": "^6.9.4",
54
+ "babel-polyfill": "^6.26.0",
55
+ "compression-webpack-plugin": "^4.0.1",
56
+ "deepmerge": "^4.2.2",
57
+ "eslint": "^6.8.0",
58
+ "eslint-plugin-import": "^2.26.0",
59
+ "eslint-plugin-node": "^11.1.0",
60
+ "eslint-plugin-vue": "^6.2.2",
61
+ "eslint-plugin-promise": "^4.3.1",
62
+ "eslint-plugin-standard": "^4.1.0",
63
+ "fast-deep-equal": "^3.1.3",
64
+ "less-loader": "^6.2.0",
65
+ "style-resources-loader": "^1.5.0",
66
+ "vue-cli-plugin-style-resources-loader": "^0.1.5",
67
+ "vue-template-compiler": "2.6.14",
68
+ "vuepress": "^1.9.7",
69
+ "webpack": "^4.46.0",
70
+ "webpack-theme-color-replacer": "1.4.1",
71
+ "whatwg-fetch": "^3.6.2"
72
+ },
73
+ "browserslist": [
74
+ "> 1%",
75
+ "last 2 versions",
76
+ "not ie <= 10"
77
+ ]
78
+ }
@@ -1,225 +1,225 @@
1
- <template>
2
- <div class="certain-category-search-wrapper">
3
- <a-auto-complete
4
- :disabled="!mapAutocomplete"
5
- :dropdown-match-select-width="false"
6
- :dropdown-style="{ width: '400px' }"
7
- class="certain-category-search"
8
- dropdown-class-name="certain-category-search-dropdown"
9
- option-label-prop="value"
10
- placeholder="输入地址关键字搜索"
11
- @search="fetchFunction"
12
- @select="onSelect"
13
- >
14
- <a-spin v-if="searching" slot="notFoundContent" size="small" />
15
- <template slot="dataSource">
16
- <a-select-opt-group v-for="group in option" :key="group.title">
17
- <span
18
- slot="label">
19
- <a-icon type="bank" /> {{ group.title }}
20
- </span>
21
- <a-select-option v-for="address in group.children" :key="address.label + ' <' + address.value + '>'">
22
- <p class="addressName"><a-icon type="environment" /> <span v-html="highLight(address.label, address.word)">{{ address.label }}</span></p>
23
- <p v-if="address.address !== '[]'" class="addressRemark">
24
- {{ address.address }}
25
- </p>
26
- </a-select-option>
27
- </a-select-opt-group>
28
- </template>
29
- <a-input>
30
- <a-icon slot="suffix" class="certain-category-icon" type="search"/>
31
- </a-input>
32
- </a-auto-complete>
33
- </div>
34
- </template>
35
- <script>
36
-
37
- import { post } from '@vue2-client/services/api'
38
- import { GetGDMap } from '@vue2-client/utils/map-utils'
39
- import { debounce } from 'ant-design-vue/lib/vc-table/src/utils'
40
-
41
- export default {
42
- name: 'AddressSearchCombobox',
43
- data () {
44
- // 检索去抖
45
- this.fetchFunction = debounce(this.fetchFunction, 300)
46
- return {
47
- // 地址搜索联想
48
- mapAutocomplete: undefined,
49
- // 检索结果
50
- option: [],
51
- // 最后检索版本
52
- lastFetchId: 0,
53
- // 检索中
54
- searching: false
55
- }
56
- },
57
- model: {
58
- prop: 'searchResult',
59
- event: 'onSelect'
60
- },
61
- props: {
62
- searchResult: {
63
- type: String,
64
- default: undefined
65
- },
66
- // 返回数据格式
67
- searchResultType: {
68
- type: String,
69
- default: 'Default'
70
- // default: 'Array'
71
- // default: 'Object'
72
- },
73
- // Object 返回格式时 可以自定义key
74
- resultKeys: {
75
- type: Object,
76
- default: () => { return { address: 'address', coords: 'coords' } }
77
- }
78
- },
79
- created () {
80
- },
81
- mounted () {
82
- GetGDMap().then(aMap => {
83
- this.mapAutocomplete = new (aMap).Autocomplete({})
84
- })
85
- },
86
- methods: {
87
- onSelect (value) {
88
- let result
89
- if (this.searchResultType !== 'Default') {
90
- const _arr = value.replace('>', '').split('<')
91
- if (this.searchResultType === 'Array') {
92
- result = _arr
93
- } else {
94
- result = {}
95
- result[this.resultKeys.address] = _arr[0]
96
- result[this.resultKeys.coords] = _arr[1]
97
- }
98
- }
99
- this.$emit('onSelect', JSON.stringify(result) || value)
100
- // this.$emit('onClick', result || value)
101
- },
102
- // 懒加载检索方法
103
- fetchFunction (value) {
104
- if (value && this.mapAutocomplete) {
105
- this.searching = true
106
- this.lastFetchId += 1
107
- const fetchId = this.lastFetchId
108
- this.mapAutocomplete.search(value, (status, result) => {
109
- if (fetchId !== this.lastFetchId) {
110
- return
111
- }
112
- if (status === 'complete') {
113
- this.option = []
114
- const addressMap = {}
115
- result.tips.forEach((res) => {
116
- if (res.location) {
117
- if (!addressMap.hasOwnProperty(res.district)) {
118
- addressMap[res.district] = []
119
- }
120
- addressMap[res.district].push({
121
- label: res.name,
122
- value: res.location.lng + ',' + res.location.lat,
123
- address: res.address + '',
124
- word: value
125
- })
126
- }
127
- })
128
- for (const key of Object.keys(addressMap)) {
129
- this.option.push({
130
- title: key,
131
- children: addressMap[key]
132
- })
133
- }
134
- }
135
- this.searching = false
136
- })
137
- }
138
- },
139
- // 获取数据
140
- getData (value, callback) {
141
- if (value !== '') {
142
- const logicName = this.attr.keyName
143
- const logic = logicName.substring(6)
144
- post('/api/af-system/logic/' + logic, value).then(res => {
145
- callback(res)
146
- })
147
- }
148
- },
149
- // 关键字高亮
150
- highLight (value, word) {
151
- // 如果标题中包含,关键字就替换一下
152
- if (value.includes(word)) {
153
- value = value.replace(word,
154
- // 这里是替换成html格式的数据,最好再加一个样式权重,保险一点
155
- '<span style="color:red!important;">' + word + '</span>'
156
- )
157
- return value
158
- // eslint-disable-next-line brace-style
159
- }
160
- // 不包含的话还用这个
161
- else {
162
- return value
163
- }
164
- }
165
- }
166
- }
167
- </script>
168
-
169
- <style>
170
- .certain-category-search-dropdown .ant-select-dropdown-menu-item-group-title {
171
- color: #666;
172
- font-weight: bold;
173
- font-size: 14px;
174
- }
175
-
176
- .certain-category-search-dropdown .ant-select-dropdown-menu-item-group {
177
- border-bottom: 1px solid #f6f6f6;
178
- }
179
-
180
- .certain-category-search-dropdown .ant-select-dropdown-menu-item {
181
- padding-left: 16px;
182
- }
183
-
184
- .certain-category-search-dropdown .ant-select-dropdown-menu-item.show-all {
185
- text-align: center;
186
- cursor: default;
187
- }
188
-
189
- .certain-category-search-dropdown .ant-select-dropdown-menu {
190
- max-height: 300px;
191
- }
192
- </style>
193
- <style scoped>
194
- .certain-category-search-wrapper,
195
- >>> .certain-category-search.ant-select-auto-complete,
196
- .ant-input-affix-wrapper,
197
- .ant-input-suffix {
198
- right: 12px;
199
- }
200
- .certain-category-search-wrapper >>> .certain-search-item-count {
201
- position: absolute;
202
- color: #999;
203
- right: 16px;
204
- }
205
- .certain-category-search-wrapper >>> .certain-category-search.ant-select-focused,
206
- .certain-category-icon {
207
- color: #108ee9;
208
- }
209
- .certain-category-search-wrapper >>> .certain-category-icon {
210
- color: #6e6e6e;
211
- transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
212
- font-size: 16px;
213
- }
214
-
215
- .addressName {
216
- margin-bottom: 0;
217
- font-size: 14px;
218
- font-weight: bold;
219
- }
220
-
221
- .addressRemark {
222
- margin-bottom: 0;
223
- font-size: 12px;
224
- }
225
- </style>
1
+ <template>
2
+ <div class="certain-category-search-wrapper">
3
+ <a-auto-complete
4
+ :disabled="!mapAutocomplete"
5
+ :dropdown-match-select-width="false"
6
+ :dropdown-style="{ width: '400px' }"
7
+ class="certain-category-search"
8
+ dropdown-class-name="certain-category-search-dropdown"
9
+ option-label-prop="value"
10
+ placeholder="输入地址关键字搜索"
11
+ @search="fetchFunction"
12
+ @select="onSelect"
13
+ >
14
+ <a-spin v-if="searching" slot="notFoundContent" size="small" />
15
+ <template slot="dataSource">
16
+ <a-select-opt-group v-for="group in option" :key="group.title">
17
+ <span
18
+ slot="label">
19
+ <a-icon type="bank" /> {{ group.title }}
20
+ </span>
21
+ <a-select-option v-for="address in group.children" :key="address.label + ' <' + address.value + '>'">
22
+ <p class="addressName"><a-icon type="environment" /> <span v-html="highLight(address.label, address.word)">{{ address.label }}</span></p>
23
+ <p v-if="address.address !== '[]'" class="addressRemark">
24
+ {{ address.address }}
25
+ </p>
26
+ </a-select-option>
27
+ </a-select-opt-group>
28
+ </template>
29
+ <a-input>
30
+ <a-icon slot="suffix" class="certain-category-icon" type="search"/>
31
+ </a-input>
32
+ </a-auto-complete>
33
+ </div>
34
+ </template>
35
+ <script>
36
+
37
+ import { post } from '@vue2-client/services/api'
38
+ import { GetGDMap } from '@vue2-client/utils/map-utils'
39
+ import { debounce } from 'ant-design-vue/lib/vc-table/src/utils'
40
+
41
+ export default {
42
+ name: 'AddressSearchCombobox',
43
+ data () {
44
+ // 检索去抖
45
+ this.fetchFunction = debounce(this.fetchFunction, 300)
46
+ return {
47
+ // 地址搜索联想
48
+ mapAutocomplete: undefined,
49
+ // 检索结果
50
+ option: [],
51
+ // 最后检索版本
52
+ lastFetchId: 0,
53
+ // 检索中
54
+ searching: false
55
+ }
56
+ },
57
+ model: {
58
+ prop: 'searchResult',
59
+ event: 'onSelect'
60
+ },
61
+ props: {
62
+ searchResult: {
63
+ type: String,
64
+ default: undefined
65
+ },
66
+ // 返回数据格式
67
+ searchResultType: {
68
+ type: String,
69
+ default: 'Default'
70
+ // default: 'Array'
71
+ // default: 'Object'
72
+ },
73
+ // Object 返回格式时 可以自定义key
74
+ resultKeys: {
75
+ type: Object,
76
+ default: () => { return { address: 'address', coords: 'coords' } }
77
+ }
78
+ },
79
+ created () {
80
+ },
81
+ mounted () {
82
+ GetGDMap().then(aMap => {
83
+ this.mapAutocomplete = new (aMap).Autocomplete({})
84
+ })
85
+ },
86
+ methods: {
87
+ onSelect (value) {
88
+ let result
89
+ if (this.searchResultType !== 'Default') {
90
+ const _arr = value.replace('>', '').split('<')
91
+ if (this.searchResultType === 'Array') {
92
+ result = _arr
93
+ } else {
94
+ result = {}
95
+ result[this.resultKeys.address] = _arr[0]
96
+ result[this.resultKeys.coords] = _arr[1]
97
+ }
98
+ }
99
+ this.$emit('onSelect', JSON.stringify(result) || value)
100
+ // this.$emit('onClick', result || value)
101
+ },
102
+ // 懒加载检索方法
103
+ fetchFunction (value) {
104
+ if (value && this.mapAutocomplete) {
105
+ this.searching = true
106
+ this.lastFetchId += 1
107
+ const fetchId = this.lastFetchId
108
+ this.mapAutocomplete.search(value, (status, result) => {
109
+ if (fetchId !== this.lastFetchId) {
110
+ return
111
+ }
112
+ if (status === 'complete') {
113
+ this.option = []
114
+ const addressMap = {}
115
+ result.tips.forEach((res) => {
116
+ if (res.location) {
117
+ if (!addressMap.hasOwnProperty(res.district)) {
118
+ addressMap[res.district] = []
119
+ }
120
+ addressMap[res.district].push({
121
+ label: res.name,
122
+ value: res.location.lng + ',' + res.location.lat,
123
+ address: res.address + '',
124
+ word: value
125
+ })
126
+ }
127
+ })
128
+ for (const key of Object.keys(addressMap)) {
129
+ this.option.push({
130
+ title: key,
131
+ children: addressMap[key]
132
+ })
133
+ }
134
+ }
135
+ this.searching = false
136
+ })
137
+ }
138
+ },
139
+ // 获取数据
140
+ getData (value, callback) {
141
+ if (value !== '') {
142
+ const logicName = this.attr.keyName
143
+ const logic = logicName.substring(6)
144
+ post('/api/af-system/logic/' + logic, value).then(res => {
145
+ callback(res)
146
+ })
147
+ }
148
+ },
149
+ // 关键字高亮
150
+ highLight (value, word) {
151
+ // 如果标题中包含,关键字就替换一下
152
+ if (value.includes(word)) {
153
+ value = value.replace(word,
154
+ // 这里是替换成html格式的数据,最好再加一个样式权重,保险一点
155
+ '<span style="color:red!important;">' + word + '</span>'
156
+ )
157
+ return value
158
+ // eslint-disable-next-line brace-style
159
+ }
160
+ // 不包含的话还用这个
161
+ else {
162
+ return value
163
+ }
164
+ }
165
+ }
166
+ }
167
+ </script>
168
+
169
+ <style>
170
+ .certain-category-search-dropdown .ant-select-dropdown-menu-item-group-title {
171
+ color: #666;
172
+ font-weight: bold;
173
+ font-size: 14px;
174
+ }
175
+
176
+ .certain-category-search-dropdown .ant-select-dropdown-menu-item-group {
177
+ border-bottom: 1px solid #f6f6f6;
178
+ }
179
+
180
+ .certain-category-search-dropdown .ant-select-dropdown-menu-item {
181
+ padding-left: 16px;
182
+ }
183
+
184
+ .certain-category-search-dropdown .ant-select-dropdown-menu-item.show-all {
185
+ text-align: center;
186
+ cursor: default;
187
+ }
188
+
189
+ .certain-category-search-dropdown .ant-select-dropdown-menu {
190
+ max-height: 300px;
191
+ }
192
+ </style>
193
+ <style scoped>
194
+ .certain-category-search-wrapper,
195
+ >>> .certain-category-search.ant-select-auto-complete,
196
+ .ant-input-affix-wrapper,
197
+ .ant-input-suffix {
198
+ right: 12px;
199
+ }
200
+ .certain-category-search-wrapper >>> .certain-search-item-count {
201
+ position: absolute;
202
+ color: #999;
203
+ right: 16px;
204
+ }
205
+ .certain-category-search-wrapper >>> .certain-category-search.ant-select-focused,
206
+ .certain-category-icon {
207
+ color: #108ee9;
208
+ }
209
+ .certain-category-search-wrapper >>> .certain-category-icon {
210
+ color: #6e6e6e;
211
+ transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
212
+ font-size: 16px;
213
+ }
214
+
215
+ .addressName {
216
+ margin-bottom: 0;
217
+ font-size: 14px;
218
+ font-weight: bold;
219
+ }
220
+
221
+ .addressRemark {
222
+ margin-bottom: 0;
223
+ font-size: 12px;
224
+ }
225
+ </style>