Merge branch 'dev'
Showing
46 changed files
with
1408 additions
and
309 deletions
This diff is collapsed.
Click to expand it.
1 | <!-- | ||
2 | * @Description: | ||
3 | * @Autor: renchao | ||
4 | * @LastEditTime: 2023-07-20 13:33:07 | ||
5 | --> | ||
1 | <template> | 6 | <template> |
2 | <el-dialog :visible.sync="dialogVisible" v-if="dialogVisible" :width="width" :fullscreen="fullscreen" top="0" | 7 | <el-dialog :visible.sync="dialogVisible" v-if="dialogVisible" :width="width" :fullscreen="fullscreen" top="0" |
3 | :append-to-body="appendToBody" :lock-scroll="true" :close-on-click-modal="false" @close="closeDialog" :key="key" | 8 | :append-to-body="appendToBody" :lock-scroll="true" :close-on-click-modal="false" @close="closeDialog" :key="key" |
... | @@ -23,117 +28,117 @@ | ... | @@ -23,117 +28,117 @@ |
23 | </el-dialog> | 28 | </el-dialog> |
24 | </template> | 29 | </template> |
25 | <script> | 30 | <script> |
26 | export default { | 31 | export default { |
27 | props: { | 32 | props: { |
28 | value: { type: Boolean, default: false }, | 33 | value: { type: Boolean, default: false }, |
29 | isMain: { | 34 | isMain: { |
30 | type: Boolean, | 35 | type: Boolean, |
31 | default: false | 36 | default: false |
32 | }, | 37 | }, |
33 | appendToBody: { | 38 | appendToBody: { |
34 | type: Boolean, | 39 | type: Boolean, |
35 | default: true | 40 | default: true |
36 | }, | 41 | }, |
37 | isButton: { | 42 | isButton: { |
38 | type: Boolean, | 43 | type: Boolean, |
39 | default: true, | 44 | default: true, |
40 | }, | 45 | }, |
41 | width: { | 46 | width: { |
42 | type: String, | 47 | type: String, |
43 | default: '70%', | 48 | default: '70%', |
44 | }, | 49 | }, |
45 | title: { | 50 | title: { |
46 | type: String, | 51 | type: String, |
47 | default: '', | 52 | default: '', |
48 | }, | 53 | }, |
49 | isFullscreen: { | 54 | isFullscreen: { |
50 | type: Boolean, | 55 | type: Boolean, |
51 | default: true, | 56 | default: true, |
52 | }, | 57 | }, |
53 | isSave: { | 58 | isSave: { |
54 | type: Boolean, | 59 | type: Boolean, |
55 | default: true, | 60 | default: true, |
56 | }, | 61 | }, |
57 | saveButton: { | 62 | saveButton: { |
58 | type: String, | 63 | type: String, |
59 | default: '提交', | 64 | default: '提交', |
60 | }, | 65 | }, |
61 | isReset: { | 66 | isReset: { |
62 | type: Boolean, | 67 | type: Boolean, |
63 | default: true, | 68 | default: true, |
64 | }, | 69 | }, |
65 | saveloding: { | 70 | saveloding: { |
66 | type: Boolean, | 71 | type: Boolean, |
67 | default: false, | 72 | default: false, |
73 | }, | ||
74 | btnDisabled: { | ||
75 | type: Boolean, | ||
76 | default: false | ||
77 | }, | ||
78 | height: { | ||
79 | type: String, | ||
80 | default: '' | ||
81 | } | ||
68 | }, | 82 | }, |
69 | btnDisabled: { | 83 | data () { |
70 | type: Boolean, | 84 | return { |
71 | default: false | 85 | key: 0, |
86 | dialogVisible: false, | ||
87 | fullscreen: false, | ||
88 | scrollerHeight: '' | ||
89 | } | ||
72 | }, | 90 | }, |
73 | height: { | 91 | watch: { |
74 | type: String, | 92 | value (val) { |
75 | default: '' | 93 | this.$nextTick(() => { |
76 | } | 94 | this.dialogVisible = val |
77 | }, | 95 | }) |
78 | data () { | 96 | this.height && (this.scrollerHeight = this.height + 'px') |
79 | return { | ||
80 | key: 0, | ||
81 | dialogVisible: false, | ||
82 | fullscreen: false, | ||
83 | scrollerHeight: '' | ||
84 | } | ||
85 | }, | ||
86 | watch: { | ||
87 | value (val) { | ||
88 | this.$nextTick(() => { | ||
89 | this.dialogVisible = val | ||
90 | }) | ||
91 | this.height && (this.scrollerHeight = this.height + 'px') | ||
92 | } | ||
93 | }, | ||
94 | methods: { | ||
95 | /** | ||
96 | * @description: handleFullscreen | ||
97 | * @author: renchao | ||
98 | */ | ||
99 | handleFullscreen () { | ||
100 | this.fullscreen = !this.fullscreen | ||
101 | if (!this.fullscreen) { | ||
102 | this.scrollerHeight = '' | ||
103 | } else { | ||
104 | this.scrollerHeight = (window.innerHeight - 120) + 'px' | ||
105 | } | 97 | } |
106 | }, | 98 | }, |
107 | /** | 99 | methods: { |
108 | * @description: submitForm | 100 | /** |
109 | * @author: renchao | 101 | * @description: handleFullscreen |
110 | */ | 102 | * @author: renchao |
111 | submitForm () { | 103 | */ |
112 | if (this.isButton) { | 104 | handleFullscreen () { |
113 | this.$emit('submitForm'); | 105 | this.fullscreen = !this.fullscreen |
106 | if (!this.fullscreen) { | ||
107 | this.scrollerHeight = '' | ||
108 | } else { | ||
109 | this.scrollerHeight = (window.innerHeight - 120) + 'px' | ||
110 | } | ||
111 | }, | ||
112 | /** | ||
113 | * @description: submitForm | ||
114 | * @author: renchao | ||
115 | */ | ||
116 | submitForm () { | ||
117 | if (this.isButton) { | ||
118 | this.$emit('submitForm'); | ||
119 | } | ||
120 | }, | ||
121 | /** | ||
122 | * @description: closeDialog | ||
123 | * @author: renchao | ||
124 | */ | ||
125 | closeDialog () { | ||
126 | this.key++ | ||
127 | this.$emit('input', false) | ||
128 | this.$emit('closeDialog') | ||
114 | } | 129 | } |
115 | }, | 130 | }, |
116 | /** | 131 | } |
117 | * @description: closeDialog | ||
118 | * @author: renchao | ||
119 | */ | ||
120 | closeDialog () { | ||
121 | this.key++ | ||
122 | this.$emit('input', false) | ||
123 | this.$emit('closeDialog') | ||
124 | } | ||
125 | }, | ||
126 | } | ||
127 | </script> | 132 | </script> |
128 | <style rel="stylesheet/scss" lang="scss" > | 133 | <style rel="stylesheet/scss" lang="scss" > |
129 | @import "~@/styles/mixin.scss"; | 134 | @import "~@/styles/mixin.scss"; |
130 | @import "~@/styles/dialogBox.scss"; | 135 | @import "~@/styles/dialogBox.scss"; |
131 | </style> | 136 | </style> |
132 | <style rel="stylesheet/scss" scoped lang="scss" > | 137 | <style rel="stylesheet/scss" scoped lang="scss" > |
133 | /deep/.is-fullscreen { | 138 | /deep/.is-fullscreen { |
134 | position: absolute; | 139 | position: absolute; |
135 | top: 50% !important; | 140 | top: 50% !important; |
136 | left: 50% !important; | 141 | left: 50% !important; |
137 | transform: translate(-50%, -50%) !important; | 142 | transform: translate(-50%, -50%) !important; |
138 | } | 143 | } |
139 | </style> | 144 | </style> | ... | ... |
... | @@ -6,6 +6,11 @@ import afterLeave from 'element-ui/src/utils/after-leave'; | ... | @@ -6,6 +6,11 @@ import afterLeave from 'element-ui/src/utils/after-leave'; |
6 | const Mask = Vue.extend(Loading); | 6 | const Mask = Vue.extend(Loading); |
7 | 7 | ||
8 | const loadingDirective = {}; | 8 | const loadingDirective = {}; |
9 | |||
10 | /** | ||
11 | * @description: install | ||
12 | * @author: renchao | ||
13 | */ | ||
9 | loadingDirective.install = Vue => { | 14 | loadingDirective.install = Vue => { |
10 | if (Vue.prototype.$isServer) return; | 15 | if (Vue.prototype.$isServer) return; |
11 | const toggleLoading = (el, binding) => { | 16 | const toggleLoading = (el, binding) => { |
... | @@ -110,14 +115,24 @@ loadingDirective.install = Vue => { | ... | @@ -110,14 +115,24 @@ loadingDirective.install = Vue => { |
110 | 115 | ||
111 | binding.value && toggleLoading(el, binding); | 116 | binding.value && toggleLoading(el, binding); |
112 | }, | 117 | }, |
113 | 118 | /** | |
119 | * @description: update | ||
120 | * @param {*} el | ||
121 | * @param {*} binding | ||
122 | * @author: renchao | ||
123 | */ | ||
114 | update: function (el, binding) { | 124 | update: function (el, binding) { |
115 | el.instance.setText(el.getAttribute('element-loading-text')); | 125 | el.instance.setText(el.getAttribute('element-loading-text')); |
116 | if (binding.oldValue !== binding.value) { | 126 | if (binding.oldValue !== binding.value) { |
117 | toggleLoading(el, binding); | 127 | toggleLoading(el, binding); |
118 | } | 128 | } |
119 | }, | 129 | }, |
120 | 130 | /** | |
131 | * @description: unbind | ||
132 | * @param {*} el | ||
133 | * @param {*} binding | ||
134 | * @author: renchao | ||
135 | */ | ||
121 | unbind: function (el, binding) { | 136 | unbind: function (el, binding) { |
122 | if (el.domInserted) { | 137 | if (el.domInserted) { |
123 | el.mask && | 138 | el.mask && | ... | ... |
... | @@ -20,6 +20,10 @@ let fullscreenLoading; | ... | @@ -20,6 +20,10 @@ let fullscreenLoading; |
20 | LoadingConstructor.prototype.originalPosition = ''; | 20 | LoadingConstructor.prototype.originalPosition = ''; |
21 | LoadingConstructor.prototype.originalOverflow = ''; | 21 | LoadingConstructor.prototype.originalOverflow = ''; |
22 | 22 | ||
23 | /** | ||
24 | * @description: close | ||
25 | * @author: renchao | ||
26 | */ | ||
23 | LoadingConstructor.prototype.close = function() { | 27 | LoadingConstructor.prototype.close = function() { |
24 | if (this.fullscreen) { | 28 | if (this.fullscreen) { |
25 | fullscreenLoading = undefined; | 29 | fullscreenLoading = undefined; |
... | @@ -38,6 +42,13 @@ LoadingConstructor.prototype.close = function() { | ... | @@ -38,6 +42,13 @@ LoadingConstructor.prototype.close = function() { |
38 | this.visible = false; | 42 | this.visible = false; |
39 | }; | 43 | }; |
40 | 44 | ||
45 | /** | ||
46 | * @description: addStyle | ||
47 | * @param {*} options | ||
48 | * @param {*} parent | ||
49 | * @param {*} instance | ||
50 | * @author: renchao | ||
51 | */ | ||
41 | const addStyle = (options, parent, instance) => { | 52 | const addStyle = (options, parent, instance) => { |
42 | let maskStyle = {}; | 53 | let maskStyle = {}; |
43 | if (options.fullscreen) { | 54 | if (options.fullscreen) { |
... | @@ -64,6 +75,10 @@ const addStyle = (options, parent, instance) => { | ... | @@ -64,6 +75,10 @@ const addStyle = (options, parent, instance) => { |
64 | }); | 75 | }); |
65 | }; | 76 | }; |
66 | 77 | ||
78 | /** | ||
79 | * @description: Loading | ||
80 | * @author: renchao | ||
81 | */ | ||
67 | const Loading = (options = {}) => { | 82 | const Loading = (options = {}) => { |
68 | if (Vue.prototype.$isServer) return; | 83 | if (Vue.prototype.$isServer) return; |
69 | options = merge({}, defaults, options); | 84 | options = merge({}, defaults, options); | ... | ... |
... | @@ -43,6 +43,11 @@ const MessageBoxConstructor = Vue.extend(msgboxVue); | ... | @@ -43,6 +43,11 @@ const MessageBoxConstructor = Vue.extend(msgboxVue); |
43 | let currentMsg, instance; | 43 | let currentMsg, instance; |
44 | let msgQueue = []; | 44 | let msgQueue = []; |
45 | 45 | ||
46 | |||
47 | /** | ||
48 | * @description: defaultCallback | ||
49 | * @author: renchao | ||
50 | */ | ||
46 | const defaultCallback = action => { | 51 | const defaultCallback = action => { |
47 | if (currentMsg) { | 52 | if (currentMsg) { |
48 | let callback = currentMsg.callback; | 53 | let callback = currentMsg.callback; |
... | @@ -56,6 +61,10 @@ const defaultCallback = action => { | ... | @@ -56,6 +61,10 @@ const defaultCallback = action => { |
56 | } | 61 | } |
57 | }; | 62 | }; |
58 | 63 | ||
64 | /** | ||
65 | * @description: initInstance | ||
66 | * @author: renchao | ||
67 | */ | ||
59 | const initInstance = () => { | 68 | const initInstance = () => { |
60 | instance = new MessageBoxConstructor({ | 69 | instance = new MessageBoxConstructor({ |
61 | el: document.createElement('div') | 70 | el: document.createElement('div') |
... | @@ -64,6 +73,10 @@ const initInstance = () => { | ... | @@ -64,6 +73,10 @@ const initInstance = () => { |
64 | instance.callback = defaultCallback; | 73 | instance.callback = defaultCallback; |
65 | }; | 74 | }; |
66 | 75 | ||
76 | /** | ||
77 | * @description: showNextMsg | ||
78 | * @author: renchao | ||
79 | */ | ||
67 | const showNextMsg = () => { | 80 | const showNextMsg = () => { |
68 | if (!instance) { | 81 | if (!instance) { |
69 | initInstance(); | 82 | initInstance(); |
... | @@ -109,6 +122,10 @@ const showNextMsg = () => { | ... | @@ -109,6 +122,10 @@ const showNextMsg = () => { |
109 | } | 122 | } |
110 | }; | 123 | }; |
111 | 124 | ||
125 | /** | ||
126 | * @description: MessageBox | ||
127 | * @author: renchao | ||
128 | */ | ||
112 | const MessageBox = function (options, callback) { | 129 | const MessageBox = function (options, callback) { |
113 | if (Vue.prototype.$isServer) return; | 130 | if (Vue.prototype.$isServer) return; |
114 | if (typeof options === 'string' || isVNode(options)) { | 131 | if (typeof options === 'string' || isVNode(options)) { |
... | @@ -143,10 +160,18 @@ const MessageBox = function (options, callback) { | ... | @@ -143,10 +160,18 @@ const MessageBox = function (options, callback) { |
143 | } | 160 | } |
144 | }; | 161 | }; |
145 | 162 | ||
163 | /** | ||
164 | * @description: setDefaults | ||
165 | * @author: renchao | ||
166 | */ | ||
146 | MessageBox.setDefaults = defaults => { | 167 | MessageBox.setDefaults = defaults => { |
147 | MessageBox.defaults = defaults; | 168 | MessageBox.defaults = defaults; |
148 | }; | 169 | }; |
149 | 170 | ||
171 | /** | ||
172 | * @description: alert | ||
173 | * @author: renchao | ||
174 | */ | ||
150 | MessageBox.alert = (title, message, options) => { | 175 | MessageBox.alert = (title, message, options) => { |
151 | if (typeof title === 'object') { | 176 | if (typeof title === 'object') { |
152 | options = title; | 177 | options = title; |
... | @@ -163,6 +188,10 @@ MessageBox.alert = (title, message, options) => { | ... | @@ -163,6 +188,10 @@ MessageBox.alert = (title, message, options) => { |
163 | }, options)); | 188 | }, options)); |
164 | }; | 189 | }; |
165 | 190 | ||
191 | /** | ||
192 | * @description: close | ||
193 | * @author: renchao | ||
194 | */ | ||
166 | MessageBox.close = () => { | 195 | MessageBox.close = () => { |
167 | instance.doClose(); | 196 | instance.doClose(); |
168 | instance.visible = false; | 197 | instance.visible = false; | ... | ... |
... | @@ -97,6 +97,10 @@ export default { | ... | @@ -97,6 +97,10 @@ export default { |
97 | }, | 97 | }, |
98 | 98 | ||
99 | methods: { | 99 | methods: { |
100 | /** | ||
101 | * @description: getSafeClose | ||
102 | * @author: renchao | ||
103 | */ | ||
100 | getSafeClose () { | 104 | getSafeClose () { |
101 | const currentId = this.uid; | 105 | const currentId = this.uid; |
102 | return () => { | 106 | return () => { |
... | @@ -105,6 +109,10 @@ export default { | ... | @@ -105,6 +109,10 @@ export default { |
105 | }); | 109 | }); |
106 | }; | 110 | }; |
107 | }, | 111 | }, |
112 | /** | ||
113 | * @description: doClose | ||
114 | * @author: renchao | ||
115 | */ | ||
108 | doClose () { | 116 | doClose () { |
109 | if (!this.visible) return; | 117 | if (!this.visible) return; |
110 | this.visible = false; | 118 | this.visible = false; |
... | @@ -122,18 +130,31 @@ export default { | ... | @@ -122,18 +130,31 @@ export default { |
122 | }); | 130 | }); |
123 | }, | 131 | }, |
124 | 132 | ||
133 | /** | ||
134 | * @description: handleWrapperClick | ||
135 | * @author: renchao | ||
136 | */ | ||
125 | handleWrapperClick () { | 137 | handleWrapperClick () { |
126 | if (this.closeOnClickModal) { | 138 | if (this.closeOnClickModal) { |
127 | this.handleAction(this.distinguishCancelAndClose ? 'close' : 'cancel'); | 139 | this.handleAction(this.distinguishCancelAndClose ? 'close' : 'cancel'); |
128 | } | 140 | } |
129 | }, | 141 | }, |
130 | 142 | ||
143 | /** | ||
144 | * @description: handleInputEnter | ||
145 | * @author: renchao | ||
146 | */ | ||
131 | handleInputEnter () { | 147 | handleInputEnter () { |
132 | if (this.inputType !== 'textarea') { | 148 | if (this.inputType !== 'textarea') { |
133 | return this.handleAction('confirm'); | 149 | return this.handleAction('confirm'); |
134 | } | 150 | } |
135 | }, | 151 | }, |
136 | 152 | ||
153 | /** | ||
154 | * @description: handleAction | ||
155 | * @param {*} action | ||
156 | * @author: renchao | ||
157 | */ | ||
137 | handleAction (action) { | 158 | handleAction (action) { |
138 | if (this.$type === 'prompt' && action === 'confirm' && !this.validate()) { | 159 | if (this.$type === 'prompt' && action === 'confirm' && !this.validate()) { |
139 | return; | 160 | return; |
... | @@ -147,6 +168,10 @@ export default { | ... | @@ -147,6 +168,10 @@ export default { |
147 | } | 168 | } |
148 | }, | 169 | }, |
149 | 170 | ||
171 | /** | ||
172 | * @description: validate | ||
173 | * @author: renchao | ||
174 | */ | ||
150 | validate () { | 175 | validate () { |
151 | if (this.$type === 'prompt') { | 176 | if (this.$type === 'prompt') { |
152 | const inputPattern = this.inputPattern; | 177 | const inputPattern = this.inputPattern; |
... | @@ -174,15 +199,27 @@ export default { | ... | @@ -174,15 +199,27 @@ export default { |
174 | removeClass(this.getInputElement(), 'invalid'); | 199 | removeClass(this.getInputElement(), 'invalid'); |
175 | return true; | 200 | return true; |
176 | }, | 201 | }, |
202 | /** | ||
203 | * @description: getFirstFocus | ||
204 | * @author: renchao | ||
205 | */ | ||
177 | getFirstFocus () { | 206 | getFirstFocus () { |
178 | const btn = this.$el.querySelector('.el-message-box__btns .el-button'); | 207 | const btn = this.$el.querySelector('.el-message-box__btns .el-button'); |
179 | const title = this.$el.querySelector('.el-message-box__btns .el-message-box__title'); | 208 | const title = this.$el.querySelector('.el-message-box__btns .el-message-box__title'); |
180 | return btn || title; | 209 | return btn || title; |
181 | }, | 210 | }, |
211 | /** | ||
212 | * @description: getInputElement | ||
213 | * @author: renchao | ||
214 | */ | ||
182 | getInputElement () { | 215 | getInputElement () { |
183 | const inputRefs = this.$refs.input.$refs; | 216 | const inputRefs = this.$refs.input.$refs; |
184 | return inputRefs.input || inputRefs.textarea; | 217 | return inputRefs.input || inputRefs.textarea; |
185 | }, | 218 | }, |
219 | /** | ||
220 | * @description: handleClose | ||
221 | * @author: renchao | ||
222 | */ | ||
186 | handleClose () { | 223 | handleClose () { |
187 | this.handleAction('close'); | 224 | this.handleAction('close'); |
188 | } | 225 | } |
... | @@ -200,6 +237,11 @@ export default { | ... | @@ -200,6 +237,11 @@ export default { |
200 | } | 237 | } |
201 | }, | 238 | }, |
202 | 239 | ||
240 | /** | ||
241 | * @description: visible | ||
242 | * @param {*} val | ||
243 | * @author: renchao | ||
244 | */ | ||
203 | visible (val) { | 245 | visible (val) { |
204 | if (val) { | 246 | if (val) { |
205 | this.uid++; | 247 | this.uid++; |
... | @@ -222,6 +264,10 @@ export default { | ... | @@ -222,6 +264,10 @@ export default { |
222 | } | 264 | } |
223 | }, | 265 | }, |
224 | 266 | ||
267 | /** | ||
268 | * @description: mounted | ||
269 | * @author: renchao | ||
270 | */ | ||
225 | mounted () { | 271 | mounted () { |
226 | this.$nextTick(() => { | 272 | this.$nextTick(() => { |
227 | if (this.closeOnHashChange) { | 273 | if (this.closeOnHashChange) { |
... | @@ -230,6 +276,10 @@ export default { | ... | @@ -230,6 +276,10 @@ export default { |
230 | }); | 276 | }); |
231 | }, | 277 | }, |
232 | 278 | ||
279 | /** | ||
280 | * @description: beforeDestroy | ||
281 | * @author: renchao | ||
282 | */ | ||
233 | beforeDestroy () { | 283 | beforeDestroy () { |
234 | if (this.closeOnHashChange) { | 284 | if (this.closeOnHashChange) { |
235 | window.removeEventListener('hashchange', this.close); | 285 | window.removeEventListener('hashchange', this.close); |
... | @@ -298,4 +348,4 @@ export default { | ... | @@ -298,4 +348,4 @@ export default { |
298 | /deep/.el-message-box__content { | 348 | /deep/.el-message-box__content { |
299 | padding-top: 0; | 349 | padding-top: 0; |
300 | } | 350 | } |
301 | </style> | ||
... | \ No newline at end of file | ... | \ No newline at end of file |
351 | </style> | ... | ... |
... | @@ -49,10 +49,18 @@ export default { | ... | @@ -49,10 +49,18 @@ export default { |
49 | } | 49 | } |
50 | }, | 50 | }, |
51 | methods: { | 51 | methods: { |
52 | /** | ||
53 | * @description: handleNotice | ||
54 | * @param {*} item | ||
55 | * @author: renchao | ||
56 | */ | ||
52 | handleNotice (item) { | 57 | handleNotice (item) { |
53 | this.$alertMes(item.noticeTitle, item.noticeContent) | 58 | this.$alertMes(item.noticeTitle, item.noticeContent) |
54 | }, | 59 | }, |
55 | // 获取数据 | 60 | /** |
61 | * @description: 获取数据 | ||
62 | * @author: renchao | ||
63 | */ | ||
56 | getData () { | 64 | getData () { |
57 | let style = document.styleSheets[0]; | 65 | let style = document.styleSheets[0]; |
58 | let text = this.$refs.text; | 66 | let text = this.$refs.text; |
... | @@ -72,13 +80,19 @@ export default { | ... | @@ -72,13 +80,19 @@ export default { |
72 | this.changeState(); | 80 | this.changeState(); |
73 | }, 300); | 81 | }, 300); |
74 | }, | 82 | }, |
75 | // 用速度计算时间(想要保持速度一样,2种状态时间不同需算出) | 83 | /** |
84 | * @description: 用速度计算时间(想要保持速度一样,2种状态时间不同需算出) | ||
85 | * @author: renchao | ||
86 | */ | ||
76 | ComputationTime () { | 87 | ComputationTime () { |
77 | this.firstAnimationTime = this.wordLength / this.speed; | 88 | this.firstAnimationTime = this.wordLength / this.speed; |
78 | this.secondAnimationTime = | 89 | this.secondAnimationTime = |
79 | (this.wordLength + this.backWidth) / this.speed; | 90 | (this.wordLength + this.backWidth) / this.speed; |
80 | }, | 91 | }, |
81 | // 根据状态切换动画 | 92 | /** |
93 | * @description: 根据状态切换动画 | ||
94 | * @author: renchao | ||
95 | */ | ||
82 | changeState () { | 96 | changeState () { |
83 | let text = this.$refs.text; | 97 | let text = this.$refs.text; |
84 | if (this.state == 1) { | 98 | if (this.state == 1) { |
... | @@ -88,6 +102,10 @@ export default { | ... | @@ -88,6 +102,10 @@ export default { |
88 | text.style.animation = `secondAnimation ${this.secondAnimationTime}s linear infinite`; | 102 | text.style.animation = `secondAnimation ${this.secondAnimationTime}s linear infinite`; |
89 | } | 103 | } |
90 | }, | 104 | }, |
105 | /** | ||
106 | * @description: Listener | ||
107 | * @author: renchao | ||
108 | */ | ||
91 | Listener () { | 109 | Listener () { |
92 | let text = this.$refs.text; | 110 | let text = this.$refs.text; |
93 | text.addEventListener( | 111 | text.addEventListener( |
... | @@ -98,10 +116,18 @@ export default { | ... | @@ -98,10 +116,18 @@ export default { |
98 | false | 116 | false |
99 | ) | 117 | ) |
100 | }, | 118 | }, |
119 | /** | ||
120 | * @description: mouseOver | ||
121 | * @author: renchao | ||
122 | */ | ||
101 | mouseOver () { | 123 | mouseOver () { |
102 | let text = this.$refs.text; | 124 | let text = this.$refs.text; |
103 | text.style.animationPlayState = 'paused' | 125 | text.style.animationPlayState = 'paused' |
104 | }, | 126 | }, |
127 | /** | ||
128 | * @description: mouseLeave | ||
129 | * @author: renchao | ||
130 | */ | ||
105 | mouseLeave () { | 131 | mouseLeave () { |
106 | let text = this.$refs.text; | 132 | let text = this.$refs.text; |
107 | text.style.animationPlayState = '' | 133 | text.style.animationPlayState = '' |
... | @@ -151,4 +177,4 @@ export default { | ... | @@ -151,4 +177,4 @@ export default { |
151 | } | 177 | } |
152 | } | 178 | } |
153 | } | 179 | } |
154 | </style> | ||
... | \ No newline at end of file | ... | \ No newline at end of file |
180 | </style> | ... | ... |
... | @@ -188,6 +188,10 @@ | ... | @@ -188,6 +188,10 @@ |
188 | this.$img = this.$refs["img"]; | 188 | this.$img = this.$refs["img"]; |
189 | }, | 189 | }, |
190 | methods: { | 190 | methods: { |
191 | /** | ||
192 | * @description: imgLoaded | ||
193 | * @author: renchao | ||
194 | */ | ||
191 | imgLoaded () { | 195 | imgLoaded () { |
192 | let imgInfo = this.$img.getBoundingClientRect(); | 196 | let imgInfo = this.$img.getBoundingClientRect(); |
193 | if (JSON.stringify(this.imgInfo) != JSON.stringify(imgInfo)) { | 197 | if (JSON.stringify(this.imgInfo) != JSON.stringify(imgInfo)) { |
... | @@ -200,6 +204,10 @@ | ... | @@ -200,6 +204,10 @@ |
200 | this.$emit("created", imgInfo); | 204 | this.$emit("created", imgInfo); |
201 | } | 205 | } |
202 | }, | 206 | }, |
207 | /** | ||
208 | * @description: mouseMove | ||
209 | * @author: renchao | ||
210 | */ | ||
203 | mouseMove (e) { | 211 | mouseMove (e) { |
204 | if (!this.hideZoom && this.imgLoadedFlag) { | 212 | if (!this.hideZoom && this.imgLoadedFlag) { |
205 | this.imgLoaded(); | 213 | this.imgLoaded(); |
... | @@ -225,6 +233,11 @@ | ... | @@ -225,6 +233,11 @@ |
225 | selector.bgTop = addWidth - y * scale; | 233 | selector.bgTop = addWidth - y * scale; |
226 | } | 234 | } |
227 | }, | 235 | }, |
236 | /** | ||
237 | * @description: initSelectorProperty | ||
238 | * @param {*} selectorWidth | ||
239 | * @author: renchao | ||
240 | */ | ||
228 | initSelectorProperty (selectorWidth) { | 241 | initSelectorProperty (selectorWidth) { |
229 | const selectorHalfWidth = selectorWidth / 2; | 242 | const selectorHalfWidth = selectorWidth / 2; |
230 | const selector = this.selector; | 243 | const selector = this.selector; |
... | @@ -236,12 +249,20 @@ | ... | @@ -236,12 +249,20 @@ |
236 | selector.absoluteLeft = left + selectorHalfWidth + scrollLeft; | 249 | selector.absoluteLeft = left + selectorHalfWidth + scrollLeft; |
237 | selector.absoluteTop = top + selectorHalfWidth + scrollTop; | 250 | selector.absoluteTop = top + selectorHalfWidth + scrollTop; |
238 | }, | 251 | }, |
252 | /** | ||
253 | * @description: mouseLeave | ||
254 | * @author: renchao | ||
255 | */ | ||
239 | mouseLeave () { | 256 | mouseLeave () { |
240 | this.hideSelector = true; | 257 | this.hideSelector = true; |
241 | if (this.outShow) { | 258 | if (this.outShow) { |
242 | this.hideOutShow = true; | 259 | this.hideOutShow = true; |
243 | } | 260 | } |
244 | }, | 261 | }, |
262 | /** | ||
263 | * @description: reset | ||
264 | * @author: renchao | ||
265 | */ | ||
245 | reset () { | 266 | reset () { |
246 | Object.assign(this.selector, { | 267 | Object.assign(this.selector, { |
247 | top: 0, | 268 | top: 0, |
... | @@ -251,9 +272,18 @@ | ... | @@ -251,9 +272,18 @@ |
251 | }); | 272 | }); |
252 | this.resetOutShowInitPosition(); | 273 | this.resetOutShowInitPosition(); |
253 | }, | 274 | }, |
275 | /** | ||
276 | * @description: resetOutShowInitPosition | ||
277 | * @author: renchao | ||
278 | */ | ||
254 | resetOutShowInitPosition () { | 279 | resetOutShowInitPosition () { |
255 | this.outShowInitTop = 0; | 280 | this.outShowInitTop = 0; |
256 | }, | 281 | }, |
282 | /** | ||
283 | * @description: resetOutShowInitPosition | ||
284 | * @param {*} e | ||
285 | * @author: renchao | ||
286 | */ | ||
257 | imgerrorfun (e) { | 287 | imgerrorfun (e) { |
258 | // let img = require('@/assets/vehicle_img/blank_vehicle.jpg') | 288 | // let img = require('@/assets/vehicle_img/blank_vehicle.jpg') |
259 | // this.url = img | 289 | // this.url = img |
... | @@ -326,4 +356,4 @@ | ... | @@ -326,4 +356,4 @@ |
326 | top: 50%; | 356 | top: 50%; |
327 | transform: translateY(-50%); | 357 | transform: translateY(-50%); |
328 | } | 358 | } |
329 | </style> | ||
... | \ No newline at end of file | ... | \ No newline at end of file |
359 | </style> | ... | ... |
... | @@ -2,6 +2,15 @@ import Vue from 'vue' | ... | @@ -2,6 +2,15 @@ import Vue from 'vue' |
2 | import Popup from './index.vue' | 2 | import Popup from './index.vue' |
3 | 3 | ||
4 | const PopupBox = Vue.extend(Popup) | 4 | const PopupBox = Vue.extend(Popup) |
5 | |||
6 | /** | ||
7 | * @description: install | ||
8 | * @param {*} title | ||
9 | * @param {*} editItem | ||
10 | * @param {*} data | ||
11 | * @param {*} formData | ||
12 | * @author: renchao | ||
13 | */ | ||
5 | Popup.install = function (title, editItem, data, formData) { | 14 | Popup.install = function (title, editItem, data, formData) { |
6 | data.title = title | 15 | data.title = title |
7 | data.editItem = editItem | 16 | data.editItem = editItem | ... | ... |
... | @@ -55,7 +55,10 @@ export default { | ... | @@ -55,7 +55,10 @@ export default { |
55 | } | 55 | } |
56 | }, | 56 | }, |
57 | mounted () { | 57 | mounted () { |
58 | // 计算滚动条高度 | 58 | /** |
59 | * @description: 计算滚动条高度 | ||
60 | * @author: renchao | ||
61 | */ | ||
59 | setTimeout(() => { | 62 | setTimeout(() => { |
60 | if (this.btnShow) { | 63 | if (this.btnShow) { |
61 | if (this.height == 'auto') { | 64 | if (this.height == 'auto') { |
... | @@ -73,10 +76,18 @@ export default { | ... | @@ -73,10 +76,18 @@ export default { |
73 | }, 300) | 76 | }, 300) |
74 | }, | 77 | }, |
75 | methods: { | 78 | methods: { |
79 | /** | ||
80 | * @description: onCancel | ||
81 | * @author: renchao | ||
82 | */ | ||
76 | onCancel () { | 83 | onCancel () { |
77 | this.isShow = false | 84 | this.isShow = false |
78 | this.cancel() | 85 | this.cancel() |
79 | }, | 86 | }, |
87 | /** | ||
88 | * @description: onConfirm | ||
89 | * @author: renchao | ||
90 | */ | ||
80 | onConfirm () { | 91 | onConfirm () { |
81 | this.loading = true | 92 | this.loading = true |
82 | let res = new Promise((resolve, reject) => { | 93 | let res = new Promise((resolve, reject) => { |
... | @@ -87,9 +98,19 @@ export default { | ... | @@ -87,9 +98,19 @@ export default { |
87 | this.isShow = false | 98 | this.isShow = false |
88 | } | 99 | } |
89 | }, | 100 | }, |
101 | /** | ||
102 | * @description: loadingFn | ||
103 | * @param {*} e | ||
104 | * @author: renchao | ||
105 | */ | ||
90 | loadingFn (e) { //加载状态 | 106 | loadingFn (e) { //加载状态 |
91 | this.loading = e | 107 | this.loading = e |
92 | }, | 108 | }, |
109 | /** | ||
110 | * @description: loadViewFn | ||
111 | * @param {*} view | ||
112 | * @author: renchao | ||
113 | */ | ||
93 | loadViewFn (view) { | 114 | loadViewFn (view) { |
94 | return (r) => | 115 | return (r) => |
95 | require.ensure([], () => | 116 | require.ensure([], () => | ... | ... |
1 | /* | 1 | /* |
2 | * @Description: | 2 | * @Description: |
3 | * @Autor: renchao | 3 | * @Autor: renchao |
4 | * @LastEditTime: 2023-06-14 15:05:38 | 4 | * @LastEditTime: 2023-06-14 15:05:38 |
5 | */ | 5 | */ |
... | @@ -8,6 +8,10 @@ import Popup from './index.vue' | ... | @@ -8,6 +8,10 @@ import Popup from './index.vue' |
8 | const PopupBox = Vue.extend(Popup) | 8 | const PopupBox = Vue.extend(Popup) |
9 | let popuping = undefined | 9 | let popuping = undefined |
10 | 10 | ||
11 | /** | ||
12 | * @description: close | ||
13 | * @author: renchao | ||
14 | */ | ||
11 | PopupBox.prototype.close = function () { | 15 | PopupBox.prototype.close = function () { |
12 | // 如果Popup 有引用,则去掉引用 | 16 | // 如果Popup 有引用,则去掉引用 |
13 | if (popuping) { | 17 | if (popuping) { |
... | @@ -23,7 +27,14 @@ PopupBox.prototype.close = function () { | ... | @@ -23,7 +27,14 @@ PopupBox.prototype.close = function () { |
23 | } | 27 | } |
24 | }, 300) | 28 | }, 300) |
25 | } | 29 | } |
26 | 30 | /** | |
31 | * @description: Popup1 | ||
32 | * @param {*} title | ||
33 | * @param {*} editItem | ||
34 | * @param {*} data | ||
35 | * @param {*} formData | ||
36 | * @author: renchao | ||
37 | */ | ||
27 | const Popup1 = (title, editItem, data, formData) => { | 38 | const Popup1 = (title, editItem, data, formData) => { |
28 | // 如果组件已渲染,则返回即可 | 39 | // 如果组件已渲染,则返回即可 |
29 | if (popuping) { | 40 | if (popuping) { | ... | ... |
... | @@ -56,7 +56,10 @@ | ... | @@ -56,7 +56,10 @@ |
56 | } | 56 | } |
57 | }, | 57 | }, |
58 | mounted () { | 58 | mounted () { |
59 | // 计算滚动条高度 | 59 | /** |
60 | * @description: 计算滚动条高度 | ||
61 | * @author: renchao | ||
62 | */ | ||
60 | setTimeout(() => { | 63 | setTimeout(() => { |
61 | if (this.btnShow) { | 64 | if (this.btnShow) { |
62 | if (this.height == 'auto') { | 65 | if (this.height == 'auto') { |
... | @@ -74,9 +77,17 @@ | ... | @@ -74,9 +77,17 @@ |
74 | }, 300) | 77 | }, 300) |
75 | }, | 78 | }, |
76 | methods: { | 79 | methods: { |
80 | /** | ||
81 | * @description: onCancel | ||
82 | * @author: renchao | ||
83 | */ | ||
77 | onCancel () { | 84 | onCancel () { |
78 | Popup1().close() | 85 | Popup1().close() |
79 | }, | 86 | }, |
87 | /** | ||
88 | * @description: onConfirm | ||
89 | * @author: renchao | ||
90 | */ | ||
80 | onConfirm () { | 91 | onConfirm () { |
81 | let res = new Promise((resolve, reject) => { | 92 | let res = new Promise((resolve, reject) => { |
82 | this.confirm() | 93 | this.confirm() |
... | @@ -86,6 +97,11 @@ | ... | @@ -86,6 +97,11 @@ |
86 | this.isShow = false | 97 | this.isShow = false |
87 | } | 98 | } |
88 | }, | 99 | }, |
100 | /** | ||
101 | * @description: loadViewFn | ||
102 | * @param {*} view | ||
103 | * @author: renchao | ||
104 | */ | ||
89 | loadViewFn (view) { | 105 | loadViewFn (view) { |
90 | return (r) => | 106 | return (r) => |
91 | require.ensure([], () => | 107 | require.ensure([], () => |
... | @@ -185,4 +201,3 @@ | ... | @@ -185,4 +201,3 @@ |
185 | opacity: 0; | 201 | opacity: 0; |
186 | } | 202 | } |
187 | </style> | 203 | </style> |
188 | |||
... | \ No newline at end of file | ... | \ No newline at end of file | ... | ... |
... | @@ -84,6 +84,13 @@ export default { | ... | @@ -84,6 +84,13 @@ export default { |
84 | }, | 84 | }, |
85 | 85 | ||
86 | methods: { | 86 | methods: { |
87 | /** | ||
88 | * @description: updateStyle | ||
89 | * @param {*} style | ||
90 | * @param {*} oldCluster | ||
91 | * @param {*} newCluster | ||
92 | * @author: renchao | ||
93 | */ | ||
87 | updateStyle (style, oldCluster, newCluster) { | 94 | updateStyle (style, oldCluster, newCluster) { |
88 | let newStyle = style | 95 | let newStyle = style |
89 | oldCluster.forEach((color, index) => { | 96 | oldCluster.forEach((color, index) => { |
... | @@ -92,6 +99,12 @@ export default { | ... | @@ -92,6 +99,12 @@ export default { |
92 | return newStyle | 99 | return newStyle |
93 | }, | 100 | }, |
94 | 101 | ||
102 | /** | ||
103 | * @description: getCSSString | ||
104 | * @param {*} url | ||
105 | * @param {*} variable | ||
106 | * @author: renchao | ||
107 | */ | ||
95 | getCSSString (url, variable) { | 108 | getCSSString (url, variable) { |
96 | return new Promise(resolve => { | 109 | return new Promise(resolve => { |
97 | const xhr = new XMLHttpRequest() | 110 | const xhr = new XMLHttpRequest() |
... | @@ -106,6 +119,11 @@ export default { | ... | @@ -106,6 +119,11 @@ export default { |
106 | }) | 119 | }) |
107 | }, | 120 | }, |
108 | 121 | ||
122 | /** | ||
123 | * @description: getThemeCluster | ||
124 | * @param {*} theme | ||
125 | * @author: renchao | ||
126 | */ | ||
109 | getThemeCluster (theme) { | 127 | getThemeCluster (theme) { |
110 | const tintColor = (color, tint) => { | 128 | const tintColor = (color, tint) => { |
111 | let red = parseInt(color.slice(0, 2), 16) | 129 | let red = parseInt(color.slice(0, 2), 16) |
... | @@ -169,4 +187,4 @@ export default { | ... | @@ -169,4 +187,4 @@ export default { |
169 | .theme-picker-dropdown .el-color-dropdown__link-btn { | 187 | .theme-picker-dropdown .el-color-dropdown__link-btn { |
170 | display: none; | 188 | display: none; |
171 | } | 189 | } |
172 | </style> | ||
... | \ No newline at end of file | ... | \ No newline at end of file |
190 | </style> | ... | ... |
... | @@ -2,6 +2,10 @@ import objectAssign from 'element-ui/src/utils/merge'; | ... | @@ -2,6 +2,10 @@ import objectAssign from 'element-ui/src/utils/merge'; |
2 | import { markNodeData, NODE_KEY } from './util'; | 2 | import { markNodeData, NODE_KEY } from './util'; |
3 | import { arrayFindIndex } from 'element-ui/src/utils/util'; | 3 | import { arrayFindIndex } from 'element-ui/src/utils/util'; |
4 | 4 | ||
5 | /** | ||
6 | * @description: getChildState | ||
7 | * @author: renchao | ||
8 | */ | ||
5 | export const getChildState = node => { | 9 | export const getChildState = node => { |
6 | let all = true; | 10 | let all = true; |
7 | let none = true; | 11 | let none = true; |
... | @@ -22,6 +26,11 @@ export const getChildState = node => { | ... | @@ -22,6 +26,11 @@ export const getChildState = node => { |
22 | return { all, none, allWithoutDisable, half: !all && !none }; | 26 | return { all, none, allWithoutDisable, half: !all && !none }; |
23 | }; | 27 | }; |
24 | 28 | ||
29 | /** | ||
30 | * @description: reInitChecked | ||
31 | * @param {*} node | ||
32 | * @author: renchao | ||
33 | */ | ||
25 | const reInitChecked = function(node) { | 34 | const reInitChecked = function(node) { |
26 | if (node.childNodes.length === 0 || node.loading) return; | 35 | if (node.childNodes.length === 0 || node.loading) return; |
27 | 36 | ||
... | @@ -45,6 +54,12 @@ const reInitChecked = function(node) { | ... | @@ -45,6 +54,12 @@ const reInitChecked = function(node) { |
45 | } | 54 | } |
46 | }; | 55 | }; |
47 | 56 | ||
57 | /** | ||
58 | * @description: getPropertyFromData | ||
59 | * @param {*} node | ||
60 | * @param {*} prop | ||
61 | * @author: renchao | ||
62 | */ | ||
48 | const getPropertyFromData = function(node, prop) { | 63 | const getPropertyFromData = function(node, prop) { |
49 | const props = node.store.props; | 64 | const props = node.store.props; |
50 | const data = node.data || {}; | 65 | const data = node.data || {}; |
... | @@ -63,6 +78,11 @@ const getPropertyFromData = function(node, prop) { | ... | @@ -63,6 +78,11 @@ const getPropertyFromData = function(node, prop) { |
63 | let nodeIdSeed = 0; | 78 | let nodeIdSeed = 0; |
64 | 79 | ||
65 | export default class Node { | 80 | export default class Node { |
81 | /** | ||
82 | * @description: constructor | ||
83 | * @param {*} options | ||
84 | * @author: renchao | ||
85 | */ | ||
66 | constructor(options) { | 86 | constructor(options) { |
67 | this.id = nodeIdSeed++; | 87 | this.id = nodeIdSeed++; |
68 | this.text = null; | 88 | this.text = null; |
... | @@ -135,6 +155,11 @@ export default class Node { | ... | @@ -135,6 +155,11 @@ export default class Node { |
135 | this.updateLeafState(); | 155 | this.updateLeafState(); |
136 | } | 156 | } |
137 | 157 | ||
158 | /** | ||
159 | * @description: setData | ||
160 | * @param {*} data | ||
161 | * @author: renchao | ||
162 | */ | ||
138 | setData(data) { | 163 | setData(data) { |
139 | if (!Array.isArray(data)) { | 164 | if (!Array.isArray(data)) { |
140 | markNodeData(this, data); | 165 | markNodeData(this, data); |
... | @@ -155,20 +180,36 @@ export default class Node { | ... | @@ -155,20 +180,36 @@ export default class Node { |
155 | } | 180 | } |
156 | } | 181 | } |
157 | 182 | ||
183 | /** | ||
184 | * @description: label | ||
185 | * @author: renchao | ||
186 | */ | ||
158 | get label() { | 187 | get label() { |
159 | return getPropertyFromData(this, 'label'); | 188 | return getPropertyFromData(this, 'label'); |
160 | } | 189 | } |
161 | 190 | ||
191 | /** | ||
192 | * @description: key | ||
193 | * @author: renchao | ||
194 | */ | ||
162 | get key() { | 195 | get key() { |
163 | const nodeKey = this.store.key; | 196 | const nodeKey = this.store.key; |
164 | if (this.data) return this.data[nodeKey]; | 197 | if (this.data) return this.data[nodeKey]; |
165 | return null; | 198 | return null; |
166 | } | 199 | } |
167 | 200 | ||
201 | /** | ||
202 | * @description: disabled | ||
203 | * @author: renchao | ||
204 | */ | ||
168 | get disabled() { | 205 | get disabled() { |
169 | return getPropertyFromData(this, 'disabled'); | 206 | return getPropertyFromData(this, 'disabled'); |
170 | } | 207 | } |
171 | 208 | ||
209 | /** | ||
210 | * @description: nextSibling | ||
211 | * @author: renchao | ||
212 | */ | ||
172 | get nextSibling() { | 213 | get nextSibling() { |
173 | const parent = this.parent; | 214 | const parent = this.parent; |
174 | if (parent) { | 215 | if (parent) { |
... | @@ -180,6 +221,10 @@ export default class Node { | ... | @@ -180,6 +221,10 @@ export default class Node { |
180 | return null; | 221 | return null; |
181 | } | 222 | } |
182 | 223 | ||
224 | /** | ||
225 | * @description: previousSibling | ||
226 | * @author: renchao | ||
227 | */ | ||
183 | get previousSibling() { | 228 | get previousSibling() { |
184 | const parent = this.parent; | 229 | const parent = this.parent; |
185 | if (parent) { | 230 | if (parent) { |
... | @@ -191,6 +236,12 @@ export default class Node { | ... | @@ -191,6 +236,12 @@ export default class Node { |
191 | return null; | 236 | return null; |
192 | } | 237 | } |
193 | 238 | ||
239 | /** | ||
240 | * @description: contains | ||
241 | * @param {*} target | ||
242 | * @param {*} deep | ||
243 | * @author: renchao | ||
244 | */ | ||
194 | contains(target, deep = true) { | 245 | contains(target, deep = true) { |
195 | const walk = function(parent) { | 246 | const walk = function(parent) { |
196 | const children = parent.childNodes || []; | 247 | const children = parent.childNodes || []; |
... | @@ -208,6 +259,10 @@ export default class Node { | ... | @@ -208,6 +259,10 @@ export default class Node { |
208 | return walk(this); | 259 | return walk(this); |
209 | } | 260 | } |
210 | 261 | ||
262 | /** | ||
263 | * @description: remove | ||
264 | * @author: renchao | ||
265 | */ | ||
211 | remove() { | 266 | remove() { |
212 | const parent = this.parent; | 267 | const parent = this.parent; |
213 | if (parent) { | 268 | if (parent) { |
... | @@ -215,6 +270,13 @@ export default class Node { | ... | @@ -215,6 +270,13 @@ export default class Node { |
215 | } | 270 | } |
216 | } | 271 | } |
217 | 272 | ||
273 | /** | ||
274 | * @description: insertChild | ||
275 | * @param {*} child | ||
276 | * @param {*} index | ||
277 | * @param {*} batch | ||
278 | * @author: renchao | ||
279 | */ | ||
218 | insertChild(child, index, batch) { | 280 | insertChild(child, index, batch) { |
219 | if (!child) throw new Error('insertChild error: child is required.'); | 281 | if (!child) throw new Error('insertChild error: child is required.'); |
220 | 282 | ||
... | @@ -247,6 +309,12 @@ export default class Node { | ... | @@ -247,6 +309,12 @@ export default class Node { |
247 | this.updateLeafState(); | 309 | this.updateLeafState(); |
248 | } | 310 | } |
249 | 311 | ||
312 | /** | ||
313 | * @description: insertBefore | ||
314 | * @param {*} child | ||
315 | * @param {*} ref | ||
316 | * @author: renchao | ||
317 | */ | ||
250 | insertBefore(child, ref) { | 318 | insertBefore(child, ref) { |
251 | let index; | 319 | let index; |
252 | if (ref) { | 320 | if (ref) { |
... | @@ -255,6 +323,12 @@ export default class Node { | ... | @@ -255,6 +323,12 @@ export default class Node { |
255 | this.insertChild(child, index); | 323 | this.insertChild(child, index); |
256 | } | 324 | } |
257 | 325 | ||
326 | /** | ||
327 | * @description: insertAfter | ||
328 | * @param {*} child | ||
329 | * @param {*} ref | ||
330 | * @author: renchao | ||
331 | */ | ||
258 | insertAfter(child, ref) { | 332 | insertAfter(child, ref) { |
259 | let index; | 333 | let index; |
260 | if (ref) { | 334 | if (ref) { |
... | @@ -264,6 +338,11 @@ export default class Node { | ... | @@ -264,6 +338,11 @@ export default class Node { |
264 | this.insertChild(child, index); | 338 | this.insertChild(child, index); |
265 | } | 339 | } |
266 | 340 | ||
341 | /** | ||
342 | * @description: removeChild | ||
343 | * @param {*} child | ||
344 | * @author: renchao | ||
345 | */ | ||
267 | removeChild(child) { | 346 | removeChild(child) { |
268 | const children = this.getChildren() || []; | 347 | const children = this.getChildren() || []; |
269 | const dataIndex = children.indexOf(child.data); | 348 | const dataIndex = children.indexOf(child.data); |
... | @@ -282,6 +361,11 @@ export default class Node { | ... | @@ -282,6 +361,11 @@ export default class Node { |
282 | this.updateLeafState(); | 361 | this.updateLeafState(); |
283 | } | 362 | } |
284 | 363 | ||
364 | /** | ||
365 | * @description: removeChildByData | ||
366 | * @param {*} data | ||
367 | * @author: renchao | ||
368 | */ | ||
285 | removeChildByData(data) { | 369 | removeChildByData(data) { |
286 | let targetNode = null; | 370 | let targetNode = null; |
287 | 371 | ||
... | @@ -297,6 +381,12 @@ export default class Node { | ... | @@ -297,6 +381,12 @@ export default class Node { |
297 | } | 381 | } |
298 | } | 382 | } |
299 | 383 | ||
384 | /** | ||
385 | * @description: expand | ||
386 | * @param {*} callback | ||
387 | * @param {*} expandParent | ||
388 | * @author: renchao | ||
389 | */ | ||
300 | expand(callback, expandParent) { | 390 | expand(callback, expandParent) { |
301 | const done = () => { | 391 | const done = () => { |
302 | if (expandParent) { | 392 | if (expandParent) { |
... | @@ -326,20 +416,38 @@ export default class Node { | ... | @@ -326,20 +416,38 @@ export default class Node { |
326 | } | 416 | } |
327 | } | 417 | } |
328 | 418 | ||
419 | /** | ||
420 | * @description: doCreateChildren | ||
421 | * @param {*} array | ||
422 | * @param {*} defaultProps | ||
423 | * @author: renchao | ||
424 | */ | ||
329 | doCreateChildren(array, defaultProps = {}) { | 425 | doCreateChildren(array, defaultProps = {}) { |
330 | array.forEach((item) => { | 426 | array.forEach((item) => { |
331 | this.insertChild(objectAssign({ data: item }, defaultProps), undefined, true); | 427 | this.insertChild(objectAssign({ data: item }, defaultProps), undefined, true); |
332 | }); | 428 | }); |
333 | } | 429 | } |
334 | 430 | ||
431 | /** | ||
432 | * @description: collapse | ||
433 | * @author: renchao | ||
434 | */ | ||
335 | collapse() { | 435 | collapse() { |
336 | this.expanded = false; | 436 | this.expanded = false; |
337 | } | 437 | } |
338 | 438 | ||
439 | /** | ||
440 | * @description: shouldLoadData | ||
441 | * @author: renchao | ||
442 | */ | ||
339 | shouldLoadData() { | 443 | shouldLoadData() { |
340 | return this.store.lazy === true && this.store.load && !this.loaded; | 444 | return this.store.lazy === true && this.store.load && !this.loaded; |
341 | } | 445 | } |
342 | 446 | ||
447 | /** | ||
448 | * @description: updateLeafState | ||
449 | * @author: renchao | ||
450 | */ | ||
343 | updateLeafState() { | 451 | updateLeafState() { |
344 | if (this.store.lazy === true && this.loaded !== true && typeof this.isLeafByUser !== 'undefined') { | 452 | if (this.store.lazy === true && this.loaded !== true && typeof this.isLeafByUser !== 'undefined') { |
345 | this.isLeaf = this.isLeafByUser; | 453 | this.isLeaf = this.isLeafByUser; |
... | @@ -353,6 +461,14 @@ export default class Node { | ... | @@ -353,6 +461,14 @@ export default class Node { |
353 | this.isLeaf = false; | 461 | this.isLeaf = false; |
354 | } | 462 | } |
355 | 463 | ||
464 | /** | ||
465 | * @description: setChecked | ||
466 | * @param {*} value | ||
467 | * @param {*} deep | ||
468 | * @param {*} recursion | ||
469 | * @param {*} passValue | ||
470 | * @author: renchao | ||
471 | */ | ||
356 | setChecked(value, deep, recursion, passValue) { | 472 | setChecked(value, deep, recursion, passValue) { |
357 | this.indeterminate = value === 'half'; | 473 | this.indeterminate = value === 'half'; |
358 | this.checked = value === true; | 474 | this.checked = value === true; |
... | @@ -406,6 +522,11 @@ export default class Node { | ... | @@ -406,6 +522,11 @@ export default class Node { |
406 | } | 522 | } |
407 | } | 523 | } |
408 | 524 | ||
525 | /** | ||
526 | * @description: getChildren | ||
527 | * @param {*} forceInit | ||
528 | * @author: renchao | ||
529 | */ | ||
409 | getChildren(forceInit = false) { // this is data | 530 | getChildren(forceInit = false) { // this is data |
410 | if (this.level === 0) return this.data; | 531 | if (this.level === 0) return this.data; |
411 | const data = this.data; | 532 | const data = this.data; |
... | @@ -428,6 +549,10 @@ export default class Node { | ... | @@ -428,6 +549,10 @@ export default class Node { |
428 | return data[children]; | 549 | return data[children]; |
429 | } | 550 | } |
430 | 551 | ||
552 | /** | ||
553 | * @description: updateChildren | ||
554 | * @author: renchao | ||
555 | */ | ||
431 | updateChildren() { | 556 | updateChildren() { |
432 | const newData = this.getChildren() || []; | 557 | const newData = this.getChildren() || []; |
433 | const oldData = this.childNodes.map((node) => node.data); | 558 | const oldData = this.childNodes.map((node) => node.data); |
... | @@ -458,6 +583,12 @@ export default class Node { | ... | @@ -458,6 +583,12 @@ export default class Node { |
458 | this.updateLeafState(); | 583 | this.updateLeafState(); |
459 | } | 584 | } |
460 | 585 | ||
586 | /** | ||
587 | * @description: loadData | ||
588 | * @param {*} callback | ||
589 | * @param {*} defaultProps | ||
590 | * @author: renchao | ||
591 | */ | ||
461 | loadData(callback, defaultProps = {}) { | 592 | loadData(callback, defaultProps = {}) { |
462 | if (this.store.lazy === true && this.store.load && !this.loaded && (!this.loading || Object.keys(defaultProps).length)) { | 593 | if (this.store.lazy === true && this.store.load && !this.loaded && (!this.loading || Object.keys(defaultProps).length)) { |
463 | this.loading = true; | 594 | this.loading = true; | ... | ... |
... | @@ -2,6 +2,11 @@ import Node from './node'; | ... | @@ -2,6 +2,11 @@ import Node from './node'; |
2 | import { getNodeKey } from './util'; | 2 | import { getNodeKey } from './util'; |
3 | 3 | ||
4 | export default class TreeStore { | 4 | export default class TreeStore { |
5 | /** | ||
6 | * @description: constructor | ||
7 | * @param {*} options | ||
8 | * @author: renchao | ||
9 | */ | ||
5 | constructor(options) { | 10 | constructor(options) { |
6 | this.currentNode = null; | 11 | this.currentNode = null; |
7 | this.currentNodeKey = null; | 12 | this.currentNodeKey = null; |
... | @@ -30,6 +35,11 @@ export default class TreeStore { | ... | @@ -30,6 +35,11 @@ export default class TreeStore { |
30 | } | 35 | } |
31 | } | 36 | } |
32 | 37 | ||
38 | /** | ||
39 | * @description: filter | ||
40 | * @param {*} value | ||
41 | * @author: renchao | ||
42 | */ | ||
33 | filter(value) { | 43 | filter(value) { |
34 | const filterNodeMethod = this.filterNodeMethod; | 44 | const filterNodeMethod = this.filterNodeMethod; |
35 | const lazy = this.lazy; | 45 | const lazy = this.lazy; |
... | @@ -60,6 +70,11 @@ export default class TreeStore { | ... | @@ -60,6 +70,11 @@ export default class TreeStore { |
60 | traverse(this); | 70 | traverse(this); |
61 | } | 71 | } |
62 | 72 | ||
73 | /** | ||
74 | * @description: setData | ||
75 | * @param {*} newVal | ||
76 | * @author: renchao | ||
77 | */ | ||
63 | setData(newVal) { | 78 | setData(newVal) { |
64 | const instanceChanged = newVal !== this.root.data; | 79 | const instanceChanged = newVal !== this.root.data; |
65 | if (instanceChanged) { | 80 | if (instanceChanged) { |
... | @@ -70,22 +85,44 @@ export default class TreeStore { | ... | @@ -70,22 +85,44 @@ export default class TreeStore { |
70 | } | 85 | } |
71 | } | 86 | } |
72 | 87 | ||
88 | /** | ||
89 | * @description: getNode | ||
90 | * @param {*} data | ||
91 | * @author: renchao | ||
92 | */ | ||
73 | getNode(data) { | 93 | getNode(data) { |
74 | if (data instanceof Node) return data; | 94 | if (data instanceof Node) return data; |
75 | const key = typeof data !== 'object' ? data : getNodeKey(this.key, data); | 95 | const key = typeof data !== 'object' ? data : getNodeKey(this.key, data); |
76 | return this.nodesMap[key] || null; | 96 | return this.nodesMap[key] || null; |
77 | } | 97 | } |
78 | 98 | ||
99 | /** | ||
100 | * @description: insertBefore | ||
101 | * @param {*} data | ||
102 | * @param {*} refData | ||
103 | * @author: renchao | ||
104 | */ | ||
79 | insertBefore(data, refData) { | 105 | insertBefore(data, refData) { |
80 | const refNode = this.getNode(refData); | 106 | const refNode = this.getNode(refData); |
81 | refNode.parent.insertBefore({ data }, refNode); | 107 | refNode.parent.insertBefore({ data }, refNode); |
82 | } | 108 | } |
83 | 109 | ||
110 | /** | ||
111 | * @description: insertAfter | ||
112 | * @param {*} data | ||
113 | * @param {*} refData | ||
114 | * @author: renchao | ||
115 | */ | ||
84 | insertAfter(data, refData) { | 116 | insertAfter(data, refData) { |
85 | const refNode = this.getNode(refData); | 117 | const refNode = this.getNode(refData); |
86 | refNode.parent.insertAfter({ data }, refNode); | 118 | refNode.parent.insertAfter({ data }, refNode); |
87 | } | 119 | } |
88 | 120 | ||
121 | /** | ||
122 | * @description: remove | ||
123 | * @param {*} data | ||
124 | * @author: renchao | ||
125 | */ | ||
89 | remove(data) { | 126 | remove(data) { |
90 | const node = this.getNode(data); | 127 | const node = this.getNode(data); |
91 | 128 | ||
... | @@ -97,6 +134,12 @@ export default class TreeStore { | ... | @@ -97,6 +134,12 @@ export default class TreeStore { |
97 | } | 134 | } |
98 | } | 135 | } |
99 | 136 | ||
137 | /** | ||
138 | * @description: append | ||
139 | * @param {*} data | ||
140 | * @param {*} parentData | ||
141 | * @author: renchao | ||
142 | */ | ||
100 | append(data, parentData) { | 143 | append(data, parentData) { |
101 | const parentNode = parentData ? this.getNode(parentData) : this.root; | 144 | const parentNode = parentData ? this.getNode(parentData) : this.root; |
102 | 145 | ||
... | @@ -105,6 +148,10 @@ export default class TreeStore { | ... | @@ -105,6 +148,10 @@ export default class TreeStore { |
105 | } | 148 | } |
106 | } | 149 | } |
107 | 150 | ||
151 | /** | ||
152 | * @description: _initDefaultCheckedNodes | ||
153 | * @author: renchao | ||
154 | */ | ||
108 | _initDefaultCheckedNodes() { | 155 | _initDefaultCheckedNodes() { |
109 | const defaultCheckedKeys = this.defaultCheckedKeys || []; | 156 | const defaultCheckedKeys = this.defaultCheckedKeys || []; |
110 | const nodesMap = this.nodesMap; | 157 | const nodesMap = this.nodesMap; |
... | @@ -118,6 +165,11 @@ export default class TreeStore { | ... | @@ -118,6 +165,11 @@ export default class TreeStore { |
118 | }); | 165 | }); |
119 | } | 166 | } |
120 | 167 | ||
168 | /** | ||
169 | * @description: _initDefaultCheckedNode | ||
170 | * @param {*} node | ||
171 | * @author: renchao | ||
172 | */ | ||
121 | _initDefaultCheckedNode(node) { | 173 | _initDefaultCheckedNode(node) { |
122 | const defaultCheckedKeys = this.defaultCheckedKeys || []; | 174 | const defaultCheckedKeys = this.defaultCheckedKeys || []; |
123 | 175 | ||
... | @@ -126,6 +178,11 @@ export default class TreeStore { | ... | @@ -126,6 +178,11 @@ export default class TreeStore { |
126 | } | 178 | } |
127 | } | 179 | } |
128 | 180 | ||
181 | /** | ||
182 | * @description: setDefaultCheckedKey | ||
183 | * @param {*} newVal | ||
184 | * @author: renchao | ||
185 | */ | ||
129 | setDefaultCheckedKey(newVal) { | 186 | setDefaultCheckedKey(newVal) { |
130 | if (newVal !== this.defaultCheckedKeys) { | 187 | if (newVal !== this.defaultCheckedKeys) { |
131 | this.defaultCheckedKeys = newVal; | 188 | this.defaultCheckedKeys = newVal; |
... | @@ -133,6 +190,11 @@ export default class TreeStore { | ... | @@ -133,6 +190,11 @@ export default class TreeStore { |
133 | } | 190 | } |
134 | } | 191 | } |
135 | 192 | ||
193 | /** | ||
194 | * @description: registerNode | ||
195 | * @param {*} node | ||
196 | * @author: renchao | ||
197 | */ | ||
136 | registerNode(node) { | 198 | registerNode(node) { |
137 | const key = this.key; | 199 | const key = this.key; |
138 | if (!key || !node || !node.data) return; | 200 | if (!key || !node || !node.data) return; |
... | @@ -141,6 +203,11 @@ export default class TreeStore { | ... | @@ -141,6 +203,11 @@ export default class TreeStore { |
141 | if (nodeKey !== undefined) this.nodesMap[node.key] = node; | 203 | if (nodeKey !== undefined) this.nodesMap[node.key] = node; |
142 | } | 204 | } |
143 | 205 | ||
206 | /** | ||
207 | * @description: deregisterNode | ||
208 | * @param {*} node | ||
209 | * @author: renchao | ||
210 | */ | ||
144 | deregisterNode(node) { | 211 | deregisterNode(node) { |
145 | const key = this.key; | 212 | const key = this.key; |
146 | if (!key || !node || !node.data) return; | 213 | if (!key || !node || !node.data) return; |
... | @@ -152,6 +219,12 @@ export default class TreeStore { | ... | @@ -152,6 +219,12 @@ export default class TreeStore { |
152 | delete this.nodesMap[node.key]; | 219 | delete this.nodesMap[node.key]; |
153 | } | 220 | } |
154 | 221 | ||
222 | /** | ||
223 | * @description: getCheckedNodes | ||
224 | * @param {*} leafOnly | ||
225 | * @param {*} includeHalfChecked | ||
226 | * @author: renchao | ||
227 | */ | ||
155 | getCheckedNodes(leafOnly = false, includeHalfChecked = false) { | 228 | getCheckedNodes(leafOnly = false, includeHalfChecked = false) { |
156 | const checkedNodes = []; | 229 | const checkedNodes = []; |
157 | const traverse = function(node) { | 230 | const traverse = function(node) { |
... | @@ -171,10 +244,19 @@ export default class TreeStore { | ... | @@ -171,10 +244,19 @@ export default class TreeStore { |
171 | return checkedNodes; | 244 | return checkedNodes; |
172 | } | 245 | } |
173 | 246 | ||
247 | /** | ||
248 | * @description: getCheckedKeys | ||
249 | * @param {*} leafOnly | ||
250 | * @author: renchao | ||
251 | */ | ||
174 | getCheckedKeys(leafOnly = false) { | 252 | getCheckedKeys(leafOnly = false) { |
175 | return this.getCheckedNodes(leafOnly).map((data) => (data || {})[this.key]); | 253 | return this.getCheckedNodes(leafOnly).map((data) => (data || {})[this.key]); |
176 | } | 254 | } |
177 | 255 | ||
256 | /** | ||
257 | * @description: getHalfCheckedNodes | ||
258 | * @author: renchao | ||
259 | */ | ||
178 | getHalfCheckedNodes() { | 260 | getHalfCheckedNodes() { |
179 | const nodes = []; | 261 | const nodes = []; |
180 | const traverse = function(node) { | 262 | const traverse = function(node) { |
... | @@ -194,10 +276,18 @@ export default class TreeStore { | ... | @@ -194,10 +276,18 @@ export default class TreeStore { |
194 | return nodes; | 276 | return nodes; |
195 | } | 277 | } |
196 | 278 | ||
279 | /** | ||
280 | * @description: getHalfCheckedKeys | ||
281 | * @author: renchao | ||
282 | */ | ||
197 | getHalfCheckedKeys() { | 283 | getHalfCheckedKeys() { |
198 | return this.getHalfCheckedNodes().map((data) => (data || {})[this.key]); | 284 | return this.getHalfCheckedNodes().map((data) => (data || {})[this.key]); |
199 | } | 285 | } |
200 | 286 | ||
287 | /** | ||
288 | * @description: _getAllNodes | ||
289 | * @author: renchao | ||
290 | */ | ||
201 | _getAllNodes() { | 291 | _getAllNodes() { |
202 | const allNodes = []; | 292 | const allNodes = []; |
203 | const nodesMap = this.nodesMap; | 293 | const nodesMap = this.nodesMap; |
... | @@ -210,6 +300,12 @@ export default class TreeStore { | ... | @@ -210,6 +300,12 @@ export default class TreeStore { |
210 | return allNodes; | 300 | return allNodes; |
211 | } | 301 | } |
212 | 302 | ||
303 | /** | ||
304 | * @description: updateChildren | ||
305 | * @param {*} key | ||
306 | * @param {*} data | ||
307 | * @author: renchao | ||
308 | */ | ||
213 | updateChildren(key, data) { | 309 | updateChildren(key, data) { |
214 | const node = this.nodesMap[key]; | 310 | const node = this.nodesMap[key]; |
215 | if (!node) return; | 311 | if (!node) return; |
... | @@ -224,6 +320,13 @@ export default class TreeStore { | ... | @@ -224,6 +320,13 @@ export default class TreeStore { |
224 | } | 320 | } |
225 | } | 321 | } |
226 | 322 | ||
323 | /** | ||
324 | * @description: _setCheckedKeys | ||
325 | * @param {*} key | ||
326 | * @param {*} leafOnly | ||
327 | * @param {*} checkedKeys | ||
328 | * @author: renchao | ||
329 | */ | ||
227 | _setCheckedKeys(key, leafOnly = false, checkedKeys) { | 330 | _setCheckedKeys(key, leafOnly = false, checkedKeys) { |
228 | const allNodes = this._getAllNodes().sort((a, b) => b.level - a.level); | 331 | const allNodes = this._getAllNodes().sort((a, b) => b.level - a.level); |
229 | const cache = Object.create(null); | 332 | const cache = Object.create(null); |
... | @@ -268,6 +371,12 @@ export default class TreeStore { | ... | @@ -268,6 +371,12 @@ export default class TreeStore { |
268 | } | 371 | } |
269 | } | 372 | } |
270 | 373 | ||
374 | /** | ||
375 | * @description: setCheckedNodes | ||
376 | * @param {*} array | ||
377 | * @param {*} leafOnly | ||
378 | * @author: renchao | ||
379 | */ | ||
271 | setCheckedNodes(array, leafOnly = false) { | 380 | setCheckedNodes(array, leafOnly = false) { |
272 | const key = this.key; | 381 | const key = this.key; |
273 | const checkedKeys = {}; | 382 | const checkedKeys = {}; |
... | @@ -278,6 +387,12 @@ export default class TreeStore { | ... | @@ -278,6 +387,12 @@ export default class TreeStore { |
278 | this._setCheckedKeys(key, leafOnly, checkedKeys); | 387 | this._setCheckedKeys(key, leafOnly, checkedKeys); |
279 | } | 388 | } |
280 | 389 | ||
390 | /** | ||
391 | * @description: setCheckedKeys | ||
392 | * @param {*} array | ||
393 | * @param {*} leafOnly | ||
394 | * @author: renchao | ||
395 | */ | ||
281 | setCheckedKeys(keys, leafOnly = false) { | 396 | setCheckedKeys(keys, leafOnly = false) { |
282 | this.defaultCheckedKeys = keys; | 397 | this.defaultCheckedKeys = keys; |
283 | const key = this.key; | 398 | const key = this.key; |
... | @@ -289,6 +404,11 @@ export default class TreeStore { | ... | @@ -289,6 +404,11 @@ export default class TreeStore { |
289 | this._setCheckedKeys(key, leafOnly, checkedKeys); | 404 | this._setCheckedKeys(key, leafOnly, checkedKeys); |
290 | } | 405 | } |
291 | 406 | ||
407 | /** | ||
408 | * @description: setDefaultExpandedKeys | ||
409 | * @param {*} keys | ||
410 | * @author: renchao | ||
411 | */ | ||
292 | setDefaultExpandedKeys(keys) { | 412 | setDefaultExpandedKeys(keys) { |
293 | keys = keys || []; | 413 | keys = keys || []; |
294 | this.defaultExpandedKeys = keys; | 414 | this.defaultExpandedKeys = keys; |
... | @@ -299,6 +419,13 @@ export default class TreeStore { | ... | @@ -299,6 +419,13 @@ export default class TreeStore { |
299 | }); | 419 | }); |
300 | } | 420 | } |
301 | 421 | ||
422 | /** | ||
423 | * @description: setChecked | ||
424 | * @param {*} data | ||
425 | * @param {*} checked | ||
426 | * @param {*} deep | ||
427 | * @author: renchao | ||
428 | */ | ||
302 | setChecked(data, checked, deep) { | 429 | setChecked(data, checked, deep) { |
303 | const node = this.getNode(data); | 430 | const node = this.getNode(data); |
304 | 431 | ||
... | @@ -307,10 +434,19 @@ export default class TreeStore { | ... | @@ -307,10 +434,19 @@ export default class TreeStore { |
307 | } | 434 | } |
308 | } | 435 | } |
309 | 436 | ||
437 | /** | ||
438 | * @description: getCurrentNode | ||
439 | * @author: renchao | ||
440 | */ | ||
310 | getCurrentNode() { | 441 | getCurrentNode() { |
311 | return this.currentNode; | 442 | return this.currentNode; |
312 | } | 443 | } |
313 | 444 | ||
445 | /** | ||
446 | * @description: setCurrentNode | ||
447 | * @param {*} currentNode | ||
448 | * @author: renchao | ||
449 | */ | ||
314 | setCurrentNode(currentNode) { | 450 | setCurrentNode(currentNode) { |
315 | const prevCurrentNode = this.currentNode; | 451 | const prevCurrentNode = this.currentNode; |
316 | if (prevCurrentNode) { | 452 | if (prevCurrentNode) { |
... | @@ -320,12 +456,22 @@ export default class TreeStore { | ... | @@ -320,12 +456,22 @@ export default class TreeStore { |
320 | this.currentNode.isCurrent = true; | 456 | this.currentNode.isCurrent = true; |
321 | } | 457 | } |
322 | 458 | ||
459 | /** | ||
460 | * @description: setUserCurrentNode | ||
461 | * @param {*} node | ||
462 | * @author: renchao | ||
463 | */ | ||
323 | setUserCurrentNode(node) { | 464 | setUserCurrentNode(node) { |
324 | const key = node[this.key]; | 465 | const key = node[this.key]; |
325 | const currNode = this.nodesMap[key]; | 466 | const currNode = this.nodesMap[key]; |
326 | this.setCurrentNode(currNode); | 467 | this.setCurrentNode(currNode); |
327 | } | 468 | } |
328 | 469 | ||
470 | /** | ||
471 | * @description: setCurrentNodeKey | ||
472 | * @param {*} key | ||
473 | * @author: renchao | ||
474 | */ | ||
329 | setCurrentNodeKey(key) { | 475 | setCurrentNodeKey(key) { |
330 | if (key === null || key === undefined) { | 476 | if (key === null || key === undefined) { |
331 | this.currentNode && (this.currentNode.isCurrent = false); | 477 | this.currentNode && (this.currentNode.isCurrent = false); | ... | ... |
1 | export const NODE_KEY = '$treeNodeId'; | 1 | export const NODE_KEY = '$treeNodeId'; |
2 | 2 | ||
3 | /** | ||
4 | * @description: markNodeData | ||
5 | * @param {*} node | ||
6 | * @param {*} data | ||
7 | * @author: renchao | ||
8 | */ | ||
3 | export const markNodeData = function(node, data) { | 9 | export const markNodeData = function(node, data) { |
4 | if (!data || data[NODE_KEY]) return; | 10 | if (!data || data[NODE_KEY]) return; |
5 | Object.defineProperty(data, NODE_KEY, { | 11 | Object.defineProperty(data, NODE_KEY, { |
... | @@ -10,11 +16,23 @@ export const markNodeData = function(node, data) { | ... | @@ -10,11 +16,23 @@ export const markNodeData = function(node, data) { |
10 | }); | 16 | }); |
11 | }; | 17 | }; |
12 | 18 | ||
19 | /** | ||
20 | * @description: getNodeKey | ||
21 | * @param {*} key | ||
22 | * @param {*} data | ||
23 | * @author: renchao | ||
24 | */ | ||
13 | export const getNodeKey = function(key, data) { | 25 | export const getNodeKey = function(key, data) { |
14 | if (!key) return data[NODE_KEY]; | 26 | if (!key) return data[NODE_KEY]; |
15 | return data[key]; | 27 | return data[key]; |
16 | }; | 28 | }; |
17 | 29 | ||
30 | /** | ||
31 | * @description: findNearestComponent | ||
32 | * @param {*} element | ||
33 | * @param {*} componentName | ||
34 | * @author: renchao | ||
35 | */ | ||
18 | export const findNearestComponent = (element, componentName) => { | 36 | export const findNearestComponent = (element, componentName) => { |
19 | let target = element; | 37 | let target = element; |
20 | while (target && target.tagName !== 'BODY') { | 38 | while (target && target.tagName !== 'BODY') { | ... | ... |
... | @@ -116,10 +116,21 @@ export default { | ... | @@ -116,10 +116,21 @@ export default { |
116 | }, | 116 | }, |
117 | 117 | ||
118 | methods: { | 118 | methods: { |
119 | /** | ||
120 | * @description: getNodeKey | ||
121 | * @param {*} node | ||
122 | * @author: renchao | ||
123 | */ | ||
119 | getNodeKey (node) { | 124 | getNodeKey (node) { |
120 | return getNodeKey(this.tree.nodeKey, node.data); | 125 | return getNodeKey(this.tree.nodeKey, node.data); |
121 | }, | 126 | }, |
122 | 127 | ||
128 | /** | ||
129 | * @description: handleSelectChange | ||
130 | * @param {*} checked | ||
131 | * @param {*} indeterminate | ||
132 | * @author: renchao | ||
133 | */ | ||
123 | handleSelectChange (checked, indeterminate) { | 134 | handleSelectChange (checked, indeterminate) { |
124 | if (this.oldChecked !== checked && this.oldIndeterminate !== indeterminate) { | 135 | if (this.oldChecked !== checked && this.oldIndeterminate !== indeterminate) { |
125 | this.tree.$emit('check-change', this.node.data, checked, indeterminate); | 136 | this.tree.$emit('check-change', this.node.data, checked, indeterminate); |
... | @@ -128,6 +139,10 @@ export default { | ... | @@ -128,6 +139,10 @@ export default { |
128 | this.indeterminate = indeterminate; | 139 | this.indeterminate = indeterminate; |
129 | }, | 140 | }, |
130 | 141 | ||
142 | /** | ||
143 | * @description: handleClick | ||
144 | * @author: renchao | ||
145 | */ | ||
131 | handleClick () { | 146 | handleClick () { |
132 | const store = this.tree.store; | 147 | const store = this.tree.store; |
133 | store.setCurrentNode(this.node); | 148 | store.setCurrentNode(this.node); |
... | @@ -144,6 +159,11 @@ export default { | ... | @@ -144,6 +159,11 @@ export default { |
144 | this.tree.$emit('node-click', this.node.data, this.node, this); | 159 | this.tree.$emit('node-click', this.node.data, this.node, this); |
145 | }, | 160 | }, |
146 | 161 | ||
162 | /** | ||
163 | * @description: handleContextMenu | ||
164 | * @param {*} event | ||
165 | * @author: renchao | ||
166 | */ | ||
147 | handleContextMenu (event) { | 167 | handleContextMenu (event) { |
148 | if (this.tree._events['node-contextmenu'] && this.tree._events['node-contextmenu'].length > 0) { | 168 | if (this.tree._events['node-contextmenu'] && this.tree._events['node-contextmenu'].length > 0) { |
149 | event.stopPropagation(); | 169 | event.stopPropagation(); |
... | @@ -152,6 +172,10 @@ export default { | ... | @@ -152,6 +172,10 @@ export default { |
152 | this.tree.$emit('node-contextmenu', event, this.node.data, this.node, this); | 172 | this.tree.$emit('node-contextmenu', event, this.node.data, this.node, this); |
153 | }, | 173 | }, |
154 | 174 | ||
175 | /** | ||
176 | * @description: handleExpandIconClick | ||
177 | * @author: renchao | ||
178 | */ | ||
155 | handleExpandIconClick () { | 179 | handleExpandIconClick () { |
156 | if (this.node.isLeaf) return; | 180 | if (this.node.isLeaf) return; |
157 | if (this.expanded) { | 181 | if (this.expanded) { |
... | @@ -163,6 +187,12 @@ export default { | ... | @@ -163,6 +187,12 @@ export default { |
163 | } | 187 | } |
164 | }, | 188 | }, |
165 | 189 | ||
190 | /** | ||
191 | * @description: handleCheckChange | ||
192 | * @param {*} value | ||
193 | * @param {*} ev | ||
194 | * @author: renchao | ||
195 | */ | ||
166 | handleCheckChange (value, ev) { | 196 | handleCheckChange (value, ev) { |
167 | this.node.setChecked(ev.target.checked, !this.tree.checkStrictly); | 197 | this.node.setChecked(ev.target.checked, !this.tree.checkStrictly); |
168 | this.$nextTick(() => { | 198 | this.$nextTick(() => { |
... | @@ -176,26 +206,53 @@ export default { | ... | @@ -176,26 +206,53 @@ export default { |
176 | }); | 206 | }); |
177 | }, | 207 | }, |
178 | 208 | ||
209 | /** | ||
210 | * @description: handleChildNodeExpand | ||
211 | * @param {*} nodeData | ||
212 | * @param {*} node | ||
213 | * @param {*} instance | ||
214 | * @author: renchao | ||
215 | */ | ||
179 | handleChildNodeExpand (nodeData, node, instance) { | 216 | handleChildNodeExpand (nodeData, node, instance) { |
180 | this.broadcast('ElTreeNode', 'tree-node-expand', node); | 217 | this.broadcast('ElTreeNode', 'tree-node-expand', node); |
181 | this.tree.$emit('node-expand', nodeData, node, instance); | 218 | this.tree.$emit('node-expand', nodeData, node, instance); |
182 | }, | 219 | }, |
183 | 220 | ||
221 | /** | ||
222 | * @description: handleDragStart | ||
223 | * @param {*} event | ||
224 | * @author: renchao | ||
225 | */ | ||
184 | handleDragStart (event) { | 226 | handleDragStart (event) { |
185 | if (!this.tree.draggable) return; | 227 | if (!this.tree.draggable) return; |
186 | this.tree.$emit('tree-node-drag-start', event, this); | 228 | this.tree.$emit('tree-node-drag-start', event, this); |
187 | }, | 229 | }, |
188 | 230 | ||
231 | /** | ||
232 | * @description: handleDragOver | ||
233 | * @param {*} event | ||
234 | * @author: renchao | ||
235 | */ | ||
189 | handleDragOver (event) { | 236 | handleDragOver (event) { |
190 | if (!this.tree.draggable) return; | 237 | if (!this.tree.draggable) return; |
191 | this.tree.$emit('tree-node-drag-over', event, this); | 238 | this.tree.$emit('tree-node-drag-over', event, this); |
192 | event.preventDefault(); | 239 | event.preventDefault(); |
193 | }, | 240 | }, |
194 | 241 | ||
242 | /** | ||
243 | * @description: handleDrop | ||
244 | * @param {*} event | ||
245 | * @author: renchao | ||
246 | */ | ||
195 | handleDrop (event) { | 247 | handleDrop (event) { |
196 | event.preventDefault(); | 248 | event.preventDefault(); |
197 | }, | 249 | }, |
198 | 250 | ||
251 | /** | ||
252 | * @description: handleDragEnd | ||
253 | * @param {*} event | ||
254 | * @author: renchao | ||
255 | */ | ||
199 | handleDragEnd (event) { | 256 | handleDragEnd (event) { |
200 | if (!this.tree.draggable) return; | 257 | if (!this.tree.draggable) return; |
201 | this.tree.$emit('tree-node-drag-end', event, this); | 258 | this.tree.$emit('tree-node-drag-end', event, this); | ... | ... |
... | @@ -177,15 +177,30 @@ | ... | @@ -177,15 +177,30 @@ |
177 | }, | 177 | }, |
178 | 178 | ||
179 | methods: { | 179 | methods: { |
180 | /** | ||
181 | * @description: filter | ||
182 | * @param {*} value | ||
183 | * @author: renchao | ||
184 | */ | ||
180 | filter(value) { | 185 | filter(value) { |
181 | if (!this.filterNodeMethod) throw new Error('[Tree] filterNodeMethod is required when filter'); | 186 | if (!this.filterNodeMethod) throw new Error('[Tree] filterNodeMethod is required when filter'); |
182 | this.store.filter(value); | 187 | this.store.filter(value); |
183 | }, | 188 | }, |
184 | 189 | ||
190 | /** | ||
191 | * @description: getNodeKey | ||
192 | * @param {*} node | ||
193 | * @author: renchao | ||
194 | */ | ||
185 | getNodeKey(node) { | 195 | getNodeKey(node) { |
186 | return getNodeKey(this.nodeKey, node.data); | 196 | return getNodeKey(this.nodeKey, node.data); |
187 | }, | 197 | }, |
188 | 198 | ||
199 | /** | ||
200 | * @description: getNodePath | ||
201 | * @param {*} data | ||
202 | * @author: renchao | ||
203 | */ | ||
189 | getNodePath(data) { | 204 | getNodePath(data) { |
190 | if (!this.nodeKey) throw new Error('[Tree] nodeKey is required in getNodePath'); | 205 | if (!this.nodeKey) throw new Error('[Tree] nodeKey is required in getNodePath'); |
191 | const node = this.store.getNode(data); | 206 | const node = this.store.getNode(data); |
... | @@ -199,87 +214,188 @@ | ... | @@ -199,87 +214,188 @@ |
199 | return path.reverse(); | 214 | return path.reverse(); |
200 | }, | 215 | }, |
201 | 216 | ||
217 | /** | ||
218 | * @description: getCheckedNodes | ||
219 | * @param {*} leafOnly | ||
220 | * @param {*} includeHalfChecked | ||
221 | * @author: renchao | ||
222 | */ | ||
202 | getCheckedNodes(leafOnly, includeHalfChecked) { | 223 | getCheckedNodes(leafOnly, includeHalfChecked) { |
203 | return this.store.getCheckedNodes(leafOnly, includeHalfChecked); | 224 | return this.store.getCheckedNodes(leafOnly, includeHalfChecked); |
204 | }, | 225 | }, |
205 | 226 | ||
227 | /** | ||
228 | * @description: getCheckedKeys | ||
229 | * @param {*} leafOnly | ||
230 | * @author: renchao | ||
231 | */ | ||
206 | getCheckedKeys(leafOnly) { | 232 | getCheckedKeys(leafOnly) { |
207 | return this.store.getCheckedKeys(leafOnly); | 233 | return this.store.getCheckedKeys(leafOnly); |
208 | }, | 234 | }, |
209 | 235 | ||
236 | /** | ||
237 | * @description: getCurrentNode | ||
238 | * @author: renchao | ||
239 | */ | ||
210 | getCurrentNode() { | 240 | getCurrentNode() { |
211 | const currentNode = this.store.getCurrentNode(); | 241 | const currentNode = this.store.getCurrentNode(); |
212 | return currentNode ? currentNode.data : null; | 242 | return currentNode ? currentNode.data : null; |
213 | }, | 243 | }, |
214 | 244 | ||
245 | /** | ||
246 | * @description: getCurrentKey | ||
247 | * @author: renchao | ||
248 | */ | ||
215 | getCurrentKey() { | 249 | getCurrentKey() { |
216 | if (!this.nodeKey) throw new Error('[Tree] nodeKey is required in getCurrentKey'); | 250 | if (!this.nodeKey) throw new Error('[Tree] nodeKey is required in getCurrentKey'); |
217 | const currentNode = this.getCurrentNode(); | 251 | const currentNode = this.getCurrentNode(); |
218 | return currentNode ? currentNode[this.nodeKey] : null; | 252 | return currentNode ? currentNode[this.nodeKey] : null; |
219 | }, | 253 | }, |
220 | 254 | ||
255 | /** | ||
256 | * @description: setCheckedNodes | ||
257 | * @param {*} nodes | ||
258 | * @param {*} leafOnly | ||
259 | * @author: renchao | ||
260 | */ | ||
221 | setCheckedNodes(nodes, leafOnly) { | 261 | setCheckedNodes(nodes, leafOnly) { |
222 | if (!this.nodeKey) throw new Error('[Tree] nodeKey is required in setCheckedNodes'); | 262 | if (!this.nodeKey) throw new Error('[Tree] nodeKey is required in setCheckedNodes'); |
223 | this.store.setCheckedNodes(nodes, leafOnly); | 263 | this.store.setCheckedNodes(nodes, leafOnly); |
224 | }, | 264 | }, |
225 | 265 | ||
266 | /** | ||
267 | * @description: setCheckedKeys | ||
268 | * @param {*} keys | ||
269 | * @param {*} leafOnly | ||
270 | * @author: renchao | ||
271 | */ | ||
226 | setCheckedKeys(keys, leafOnly) { | 272 | setCheckedKeys(keys, leafOnly) { |
227 | if (!this.nodeKey) throw new Error('[Tree] nodeKey is required in setCheckedKeys'); | 273 | if (!this.nodeKey) throw new Error('[Tree] nodeKey is required in setCheckedKeys'); |
228 | this.store.setCheckedKeys(keys, leafOnly); | 274 | this.store.setCheckedKeys(keys, leafOnly); |
229 | }, | 275 | }, |
230 | 276 | ||
277 | /** | ||
278 | * @description: setChecked | ||
279 | * @param {*} data | ||
280 | * @param {*} checked | ||
281 | * @param {*} deep | ||
282 | * @author: renchao | ||
283 | */ | ||
231 | setChecked(data, checked, deep) { | 284 | setChecked(data, checked, deep) { |
232 | this.store.setChecked(data, checked, deep); | 285 | this.store.setChecked(data, checked, deep); |
233 | }, | 286 | }, |
234 | 287 | ||
288 | /** | ||
289 | * @description: getHalfCheckedNodes | ||
290 | * @author: renchao | ||
291 | */ | ||
235 | getHalfCheckedNodes() { | 292 | getHalfCheckedNodes() { |
236 | return this.store.getHalfCheckedNodes(); | 293 | return this.store.getHalfCheckedNodes(); |
237 | }, | 294 | }, |
238 | 295 | ||
296 | /** | ||
297 | * @description: getHalfCheckedKeys | ||
298 | * @author: renchao | ||
299 | */ | ||
239 | getHalfCheckedKeys() { | 300 | getHalfCheckedKeys() { |
240 | return this.store.getHalfCheckedKeys(); | 301 | return this.store.getHalfCheckedKeys(); |
241 | }, | 302 | }, |
242 | 303 | ||
304 | /** | ||
305 | * @description: setCurrentNode | ||
306 | * @param {*} node | ||
307 | * @author: renchao | ||
308 | */ | ||
243 | setCurrentNode(node) { | 309 | setCurrentNode(node) { |
244 | if (!this.nodeKey) throw new Error('[Tree] nodeKey is required in setCurrentNode'); | 310 | if (!this.nodeKey) throw new Error('[Tree] nodeKey is required in setCurrentNode'); |
245 | this.store.setUserCurrentNode(node); | 311 | this.store.setUserCurrentNode(node); |
246 | }, | 312 | }, |
247 | 313 | ||
314 | /** | ||
315 | * @description: setCurrentKey | ||
316 | * @param {*} key | ||
317 | * @author: renchao | ||
318 | */ | ||
248 | setCurrentKey(key) { | 319 | setCurrentKey(key) { |
249 | if (!this.nodeKey) throw new Error('[Tree] nodeKey is required in setCurrentKey'); | 320 | if (!this.nodeKey) throw new Error('[Tree] nodeKey is required in setCurrentKey'); |
250 | this.store.setCurrentNodeKey(key); | 321 | this.store.setCurrentNodeKey(key); |
251 | }, | 322 | }, |
252 | 323 | ||
324 | /** | ||
325 | * @description: getNode | ||
326 | * @param {*} data | ||
327 | * @author: renchao | ||
328 | */ | ||
253 | getNode(data) { | 329 | getNode(data) { |
254 | return this.store.getNode(data); | 330 | return this.store.getNode(data); |
255 | }, | 331 | }, |
256 | 332 | ||
333 | /** | ||
334 | * @description: remove | ||
335 | * @param {*} data | ||
336 | * @author: renchao | ||
337 | */ | ||
257 | remove(data) { | 338 | remove(data) { |
258 | this.store.remove(data); | 339 | this.store.remove(data); |
259 | }, | 340 | }, |
260 | 341 | ||
342 | /** | ||
343 | * @description: append | ||
344 | * @param {*} data | ||
345 | * @param {*} parentNode | ||
346 | * @author: renchao | ||
347 | */ | ||
261 | append(data, parentNode) { | 348 | append(data, parentNode) { |
262 | this.store.append(data, parentNode); | 349 | this.store.append(data, parentNode); |
263 | }, | 350 | }, |
264 | 351 | ||
352 | /** | ||
353 | * @description: insertBefore | ||
354 | * @param {*} data | ||
355 | * @param {*} refNode | ||
356 | * @author: renchao | ||
357 | */ | ||
265 | insertBefore(data, refNode) { | 358 | insertBefore(data, refNode) { |
266 | this.store.insertBefore(data, refNode); | 359 | this.store.insertBefore(data, refNode); |
267 | }, | 360 | }, |
268 | 361 | ||
362 | /** | ||
363 | * @description: insertAfter | ||
364 | * @param {*} data | ||
365 | * @param {*} refNode | ||
366 | * @author: renchao | ||
367 | */ | ||
269 | insertAfter(data, refNode) { | 368 | insertAfter(data, refNode) { |
270 | this.store.insertAfter(data, refNode); | 369 | this.store.insertAfter(data, refNode); |
271 | }, | 370 | }, |
272 | 371 | ||
372 | /** | ||
373 | * @description: handleNodeExpand | ||
374 | * @param {*} nodeData | ||
375 | * @param {*} node | ||
376 | * @param {*} instance | ||
377 | * @author: renchao | ||
378 | */ | ||
273 | handleNodeExpand(nodeData, node, instance) { | 379 | handleNodeExpand(nodeData, node, instance) { |
274 | this.broadcast('ElTreeNode', 'tree-node-expand', node); | 380 | this.broadcast('ElTreeNode', 'tree-node-expand', node); |
275 | this.$emit('node-expand', nodeData, node, instance); | 381 | this.$emit('node-expand', nodeData, node, instance); |
276 | }, | 382 | }, |
277 | 383 | ||
384 | /** | ||
385 | * @description: updateKeyChildren | ||
386 | * @param {*} key | ||
387 | * @param {*} data | ||
388 | * @author: renchao | ||
389 | */ | ||
278 | updateKeyChildren(key, data) { | 390 | updateKeyChildren(key, data) { |
279 | if (!this.nodeKey) throw new Error('[Tree] nodeKey is required in updateKeyChild'); | 391 | if (!this.nodeKey) throw new Error('[Tree] nodeKey is required in updateKeyChild'); |
280 | this.store.updateChildren(key, data); | 392 | this.store.updateChildren(key, data); |
281 | }, | 393 | }, |
282 | 394 | ||
395 | /** | ||
396 | * @description: initTabIndex | ||
397 | * @author: renchao | ||
398 | */ | ||
283 | initTabIndex() { | 399 | initTabIndex() { |
284 | this.treeItems = this.$el.querySelectorAll('.is-focusable[role=treeitem]'); | 400 | this.treeItems = this.$el.querySelectorAll('.is-focusable[role=treeitem]'); |
285 | this.checkboxItems = this.$el.querySelectorAll('input[type=checkbox]'); | 401 | this.checkboxItems = this.$el.querySelectorAll('input[type=checkbox]'); |
... | @@ -291,6 +407,11 @@ | ... | @@ -291,6 +407,11 @@ |
291 | this.treeItems[0] && this.treeItems[0].setAttribute('tabindex', 0); | 407 | this.treeItems[0] && this.treeItems[0].setAttribute('tabindex', 0); |
292 | }, | 408 | }, |
293 | 409 | ||
410 | /** | ||
411 | * @description: handleKeydown | ||
412 | * @param {*} ev | ||
413 | * @author: renchao | ||
414 | */ | ||
294 | handleKeydown(ev) { | 415 | handleKeydown(ev) { |
295 | const currentItem = ev.target; | 416 | const currentItem = ev.target; |
296 | if (currentItem.className.indexOf('el-tree-node') === -1) return; | 417 | if (currentItem.className.indexOf('el-tree-node') === -1) return; |
... | @@ -319,6 +440,10 @@ | ... | @@ -319,6 +440,10 @@ |
319 | } | 440 | } |
320 | }, | 441 | }, |
321 | 442 | ||
443 | /** | ||
444 | * @description: created | ||
445 | * @author: renchao | ||
446 | */ | ||
322 | created() { | 447 | created() { |
323 | this.isTree = true; | 448 | this.isTree = true; |
324 | 449 | ... | ... |
... | @@ -36,9 +36,18 @@ export default { | ... | @@ -36,9 +36,18 @@ export default { |
36 | }) | 36 | }) |
37 | }, | 37 | }, |
38 | methods: { | 38 | methods: { |
39 | /** | ||
40 | * @description: closeViewer | ||
41 | * @author: renchao | ||
42 | */ | ||
39 | closeViewer () { | 43 | closeViewer () { |
40 | this.$emit('close-viewer') | 44 | this.$emit('close-viewer') |
41 | }, | 45 | }, |
46 | /** | ||
47 | * @description: hideCusBtn | ||
48 | * @param {*} e | ||
49 | * @author: renchao | ||
50 | */ | ||
42 | hideCusBtn (e) { | 51 | hideCusBtn (e) { |
43 | let className = e.target.className | 52 | let className = e.target.className |
44 | if (className === 'el-icon-download') { | 53 | if (className === 'el-icon-download') { |
... | @@ -48,6 +57,11 @@ export default { | ... | @@ -48,6 +57,11 @@ export default { |
48 | this.downloadImage(imgUrl) | 57 | this.downloadImage(imgUrl) |
49 | } | 58 | } |
50 | }, | 59 | }, |
60 | /** | ||
61 | * @description: downloadImage | ||
62 | * @param {*} imgUrl | ||
63 | * @author: renchao | ||
64 | */ | ||
51 | downloadImage (imgUrl) { | 65 | downloadImage (imgUrl) { |
52 | let tmpArr = imgUrl.split('/') | 66 | let tmpArr = imgUrl.split('/') |
53 | let fileName = tmpArr[tmpArr.length - 1] | 67 | let fileName = tmpArr[tmpArr.length - 1] |
... | @@ -83,4 +97,4 @@ export default { | ... | @@ -83,4 +97,4 @@ export default { |
83 | /deep/ .el-image-viewer__close { | 97 | /deep/ .el-image-viewer__close { |
84 | color: #ffffff; | 98 | color: #ffffff; |
85 | } | 99 | } |
86 | </style> | ||
... | \ No newline at end of file | ... | \ No newline at end of file |
100 | </style> | ... | ... |
... | @@ -77,7 +77,11 @@ | ... | @@ -77,7 +77,11 @@ |
77 | this.autoCurrentLabel() | 77 | this.autoCurrentLabel() |
78 | }, | 78 | }, |
79 | methods: { | 79 | methods: { |
80 | //表格显示隐藏回调 | 80 | /** |
81 | * @description: 表格显示隐藏回调 | ||
82 | * @param {*} visible | ||
83 | * @author: renchao | ||
84 | */ | ||
81 | visibleChange (visible) { | 85 | visibleChange (visible) { |
82 | if (visible) { | 86 | if (visible) { |
83 | this.formData = {} | 87 | this.formData = {} |
... | @@ -86,7 +90,10 @@ | ... | @@ -86,7 +90,10 @@ |
86 | this.autoCurrentLabel() | 90 | this.autoCurrentLabel() |
87 | } | 91 | } |
88 | }, | 92 | }, |
89 | //获取表格数据 | 93 | /** |
94 | * @description: 获取表格数据 | ||
95 | * @author: renchao | ||
96 | */ | ||
90 | async getData () { | 97 | async getData () { |
91 | //表格默认赋值 | 98 | //表格默认赋值 |
92 | if (this.multiple) { | 99 | if (this.multiple) { |
... | @@ -104,11 +111,17 @@ | ... | @@ -104,11 +111,17 @@ |
104 | } | 111 | } |
105 | // this.$refs.table.setScrollTop(0) | 112 | // this.$refs.table.setScrollTop(0) |
106 | }, | 113 | }, |
107 | //插糟表单提交 | 114 | /** |
115 | * @description: 插糟表单提交 | ||
116 | * @author: renchao | ||
117 | */ | ||
108 | formSubmit () { | 118 | formSubmit () { |
109 | this.getData() | 119 | this.getData() |
110 | }, | 120 | }, |
111 | //自动模拟options赋值 | 121 | /** |
122 | * @description: 自动模拟options赋值 | ||
123 | * @author: renchao | ||
124 | */ | ||
112 | autoCurrentLabel () { | 125 | autoCurrentLabel () { |
113 | this.$nextTick(() => { | 126 | this.$nextTick(() => { |
114 | if (this.multiple) { | 127 | if (this.multiple) { |
... | @@ -122,7 +135,12 @@ | ... | @@ -122,7 +135,12 @@ |
122 | } | 135 | } |
123 | }) | 136 | }) |
124 | }, | 137 | }, |
125 | //表格勾选事件 | 138 | /** |
139 | * @description: 表格勾选事件 | ||
140 | * @param {*} rows | ||
141 | * @param {*} row | ||
142 | * @author: renchao | ||
143 | */ | ||
126 | select (rows, row) { | 144 | select (rows, row) { |
127 | var isSelect = rows.length && rows.indexOf(row) !== -1 | 145 | var isSelect = rows.length && rows.indexOf(row) !== -1 |
128 | if (isSelect) { | 146 | if (isSelect) { |
... | @@ -134,7 +152,11 @@ | ... | @@ -134,7 +152,11 @@ |
134 | this.$emit('update:modelValue', this.defaultValue); | 152 | this.$emit('update:modelValue', this.defaultValue); |
135 | this.$emit('change', this.defaultValue); | 153 | this.$emit('change', this.defaultValue); |
136 | }, | 154 | }, |
137 | //表格全选事件 | 155 | /** |
156 | * @description: 表格全选事件 | ||
157 | * @param {*} rows | ||
158 | * @author: renchao | ||
159 | */ | ||
138 | selectAll (rows) { | 160 | selectAll (rows) { |
139 | var isAllSelect = rows.length > 0 | 161 | var isAllSelect = rows.length > 0 |
140 | if (isAllSelect) { | 162 | if (isAllSelect) { |
... | @@ -156,6 +178,11 @@ | ... | @@ -156,6 +178,11 @@ |
156 | this.$emit('update:modelValue', this.defaultValue); | 178 | this.$emit('update:modelValue', this.defaultValue); |
157 | this.$emit('change', this.defaultValue); | 179 | this.$emit('change', this.defaultValue); |
158 | }, | 180 | }, |
181 | /** | ||
182 | * @description: click | ||
183 | * @param {*} row | ||
184 | * @author: renchao | ||
185 | */ | ||
159 | click (row) { | 186 | click (row) { |
160 | if (this.multiple) { | 187 | if (this.multiple) { |
161 | //处理多选点击行 | 188 | //处理多选点击行 |
... | @@ -168,25 +195,42 @@ | ... | @@ -168,25 +195,42 @@ |
168 | this.$emit('change', this.defaultValue); | 195 | this.$emit('change', this.defaultValue); |
169 | } | 196 | } |
170 | }, | 197 | }, |
171 | //tags删除后回调 | 198 | /** |
199 | * @description: tags删除后回调 | ||
200 | * @param {*} tag | ||
201 | * @author: renchao | ||
202 | */ | ||
172 | removeTag (tag) { | 203 | removeTag (tag) { |
173 | var row = this.findRowByKey(tag[this.defaultProps.value]) | 204 | var row = this.findRowByKey(tag[this.defaultProps.value]) |
174 | this.$refs.table.toggleRowSelection(row, false); | 205 | this.$refs.table.toggleRowSelection(row, false); |
175 | this.$emit('update:modelValue', this.defaultValue); | 206 | this.$emit('update:modelValue', this.defaultValue); |
176 | }, | 207 | }, |
177 | //清空后的回调 | 208 | /** |
209 | * @description: 清空后的回调 | ||
210 | * @author: renchao | ||
211 | */ | ||
178 | clear () { | 212 | clear () { |
179 | this.$emit('update:modelValue', this.defaultValue); | 213 | this.$emit('update:modelValue', this.defaultValue); |
180 | }, | 214 | }, |
181 | // 关键值查询表格数据行 | 215 | /** |
216 | * @description: 关键值查询表格数据行 | ||
217 | * @param {*} value | ||
218 | * @author: renchao | ||
219 | */ | ||
182 | findRowByKey (value) { | 220 | findRowByKey (value) { |
183 | return this.tableData.find(item => item[this.defaultProps.value] === value) | 221 | return this.tableData.find(item => item[this.defaultProps.value] === value) |
184 | }, | 222 | }, |
185 | // 触发select隐藏 | 223 | /** |
224 | * @description: 触发select隐藏 | ||
225 | * @author: renchao | ||
226 | */ | ||
186 | blur () { | 227 | blur () { |
187 | this.$refs.select.blur(); | 228 | this.$refs.select.blur(); |
188 | }, | 229 | }, |
189 | // 触发select显示 | 230 | /** |
231 | * @description: 触发select显示 | ||
232 | * @author: renchao | ||
233 | */ | ||
190 | focus () { | 234 | focus () { |
191 | this.$refs.select.focus(); | 235 | this.$refs.select.focus(); |
192 | } | 236 | } | ... | ... |
1 | /* | 1 | /* |
2 | * @Description: | 2 | * @Description: |
3 | * @Autor: renchao | 3 | * @Autor: renchao |
4 | * @LastEditTime: 2023-06-14 15:05:38 | 4 | * @LastEditTime: 2023-06-14 15:05:38 |
5 | */ | 5 | */ |
... | @@ -8,6 +8,10 @@ import Popup from './index.vue' | ... | @@ -8,6 +8,10 @@ import Popup from './index.vue' |
8 | const PopupBox = Vue.extend(Popup) | 8 | const PopupBox = Vue.extend(Popup) |
9 | let popuping = undefined | 9 | let popuping = undefined |
10 | 10 | ||
11 | /** | ||
12 | * @description: close | ||
13 | * @author: renchao | ||
14 | */ | ||
11 | PopupBox.prototype.close = function () { | 15 | PopupBox.prototype.close = function () { |
12 | // 如果Popup 有引用,则去掉引用 | 16 | // 如果Popup 有引用,则去掉引用 |
13 | if (popuping) { | 17 | if (popuping) { |
... | @@ -24,6 +28,14 @@ PopupBox.prototype.close = function () { | ... | @@ -24,6 +28,14 @@ PopupBox.prototype.close = function () { |
24 | }, 300) | 28 | }, 300) |
25 | } | 29 | } |
26 | 30 | ||
31 | /** | ||
32 | * @description: Popup1 | ||
33 | * @param {*} title | ||
34 | * @param {*} editItem | ||
35 | * @param {*} data | ||
36 | * @param {*} formData | ||
37 | * @author: renchao | ||
38 | */ | ||
27 | const Popup1 = (title, editItem, data, formData) => { | 39 | const Popup1 = (title, editItem, data, formData) => { |
28 | // 如果组件已渲染,则返回即可 | 40 | // 如果组件已渲染,则返回即可 |
29 | if (popuping) { | 41 | if (popuping) { | ... | ... |
... | @@ -73,9 +73,17 @@ | ... | @@ -73,9 +73,17 @@ |
73 | }, 300) | 73 | }, 300) |
74 | }, | 74 | }, |
75 | methods: { | 75 | methods: { |
76 | /** | ||
77 | * @description: onCancel | ||
78 | * @author: renchao | ||
79 | */ | ||
76 | onCancel () { | 80 | onCancel () { |
77 | Popup1().close() | 81 | Popup1().close() |
78 | }, | 82 | }, |
83 | /** | ||
84 | * @description: onConfirm | ||
85 | * @author: renchao | ||
86 | */ | ||
79 | onConfirm () { | 87 | onConfirm () { |
80 | let res = new Promise((resolve, reject) => { | 88 | let res = new Promise((resolve, reject) => { |
81 | this.confirm() | 89 | this.confirm() |
... | @@ -85,6 +93,11 @@ | ... | @@ -85,6 +93,11 @@ |
85 | this.isShow = false | 93 | this.isShow = false |
86 | } | 94 | } |
87 | }, | 95 | }, |
96 | /** | ||
97 | * @description: loadViewFn | ||
98 | * @param {*} view | ||
99 | * @author: renchao | ||
100 | */ | ||
88 | loadViewFn (view) { | 101 | loadViewFn (view) { |
89 | return (r) => | 102 | return (r) => |
90 | require.ensure([], () => | 103 | require.ensure([], () => |
... | @@ -184,4 +197,3 @@ | ... | @@ -184,4 +197,3 @@ |
184 | opacity: 0; | 197 | opacity: 0; |
185 | } | 198 | } |
186 | </style> | 199 | </style> |
187 | |||
... | \ No newline at end of file | ... | \ No newline at end of file | ... | ... |
1 | export const theme = { | 1 | export const theme = { |
2 | /** | ||
3 | * @description: bind | ||
4 | * @param {*} el | ||
5 | * @param {*} binding | ||
6 | * @param {*} vnode | ||
7 | * @author: renchao | ||
8 | */ | ||
2 | bind: function (el, binding, vnode) { | 9 | bind: function (el, binding, vnode) { |
3 | setEleStyleColorAttribute(el, binding); | 10 | setEleStyleColorAttribute(el, binding); |
4 | }, | 11 | }, |
12 | /** | ||
13 | * @description: update | ||
14 | * @param {*} el | ||
15 | * @param {*} binding | ||
16 | * @param {*} vnode | ||
17 | * @author: renchao | ||
18 | */ | ||
5 | update: function (el, binding, vnode) { | 19 | update: function (el, binding, vnode) { |
6 | setEleStyleColorAttribute(el, binding); | 20 | setEleStyleColorAttribute(el, binding); |
7 | }, | 21 | }, |
22 | /** | ||
23 | * @description: componentUpdated | ||
24 | * @param {*} el | ||
25 | * @param {*} binding | ||
26 | * @param {*} vnode | ||
27 | * @author: renchao | ||
28 | */ | ||
8 | componentUpdated: function (el, binding, vnode) { | 29 | componentUpdated: function (el, binding, vnode) { |
9 | setEleStyleColorAttribute(el, binding); | 30 | setEleStyleColorAttribute(el, binding); |
10 | } | 31 | } |
... | @@ -16,4 +37,4 @@ function setEleStyleColorAttribute (el, binding) { | ... | @@ -16,4 +37,4 @@ function setEleStyleColorAttribute (el, binding) { |
16 | if (background) el.style['background-color'] = value; | 37 | if (background) el.style['background-color'] = value; |
17 | if (font) el.style.color = value; | 38 | if (font) el.style.color = value; |
18 | if (border) el.style['border-color'] = value; | 39 | if (border) el.style['border-color'] = value; |
19 | } | ||
... | \ No newline at end of file | ... | \ No newline at end of file |
40 | } | ... | ... |
... | @@ -57,6 +57,10 @@ | ... | @@ -57,6 +57,10 @@ |
57 | window.removeEventListener('message') | 57 | window.removeEventListener('message') |
58 | }, | 58 | }, |
59 | methods: { | 59 | methods: { |
60 | /** | ||
61 | * @description: queryNoticeList | ||
62 | * @author: renchao | ||
63 | */ | ||
60 | queryNoticeList () { | 64 | queryNoticeList () { |
61 | getHomeNoticeList().then(res => { | 65 | getHomeNoticeList().then(res => { |
62 | if (res.result) { | 66 | if (res.result) { |
... | @@ -64,6 +68,10 @@ | ... | @@ -64,6 +68,10 @@ |
64 | } | 68 | } |
65 | }) | 69 | }) |
66 | }, | 70 | }, |
71 | /** | ||
72 | * @description: logout | ||
73 | * @author: renchao | ||
74 | */ | ||
67 | logout () { | 75 | logout () { |
68 | axios.post(window._config.services.management + "/management/logout").then(() => { | 76 | axios.post(window._config.services.management + "/management/logout").then(() => { |
69 | setToken(undefined) | 77 | setToken(undefined) |
... | @@ -73,12 +81,22 @@ | ... | @@ -73,12 +81,22 @@ |
73 | }) | 81 | }) |
74 | }, | 82 | }, |
75 | 83 | ||
84 | /** | ||
85 | * @description: themeChange | ||
86 | * @param {*} val | ||
87 | * @author: renchao | ||
88 | */ | ||
76 | themeChange (val) { | 89 | themeChange (val) { |
77 | this.$store.dispatch('app/updateTheme', val) | 90 | this.$store.dispatch('app/updateTheme', val) |
78 | }, | 91 | }, |
79 | searchMessageCenter () { | 92 | searchMessageCenter () { |
80 | this.$router.push({ name: 'messagecenter' }) | 93 | this.$router.push({ name: 'messagecenter' }) |
81 | }, | 94 | }, |
95 | /** | ||
96 | * @description: handleCommand | ||
97 | * @param {*} command | ||
98 | * @author: renchao | ||
99 | */ | ||
82 | handleCommand (command) { | 100 | handleCommand (command) { |
83 | if (command == 'a') { | 101 | if (command == 'a') { |
84 | //个人中心 | 102 | //个人中心 | ... | ... |
... | @@ -10,6 +10,10 @@ export default { | ... | @@ -10,6 +10,10 @@ export default { |
10 | this.fixBugIniOS() | 10 | this.fixBugIniOS() |
11 | }, | 11 | }, |
12 | methods: { | 12 | methods: { |
13 | /** | ||
14 | * @description: fixBugIniOS | ||
15 | * @author: renchao | ||
16 | */ | ||
13 | fixBugIniOS() { | 17 | fixBugIniOS() { |
14 | const $subMenu = this.$refs.subMenu | 18 | const $subMenu = this.$refs.subMenu |
15 | if ($subMenu) { | 19 | if ($subMenu) { | ... | ... |
... | @@ -26,6 +26,11 @@ export default { | ... | @@ -26,6 +26,11 @@ export default { |
26 | } | 26 | } |
27 | }, | 27 | }, |
28 | methods: { | 28 | methods: { |
29 | /** | ||
30 | * @description: linkProps | ||
31 | * @param {*} to | ||
32 | * @author: renchao | ||
33 | */ | ||
29 | linkProps(to) { | 34 | linkProps(to) { |
30 | if (this.isExternal) { | 35 | if (this.isExternal) { |
31 | return { | 36 | return { | ... | ... |
... | @@ -53,6 +53,12 @@ export default { | ... | @@ -53,6 +53,12 @@ export default { |
53 | return {} | 53 | return {} |
54 | }, | 54 | }, |
55 | methods: { | 55 | methods: { |
56 | /** | ||
57 | * @description: hasOneShowingChild | ||
58 | * @param {*} children | ||
59 | * @param {*} parent | ||
60 | * @author: renchao | ||
61 | */ | ||
56 | hasOneShowingChild (children = [], parent) { | 62 | hasOneShowingChild (children = [], parent) { |
57 | const showingChildren = children.filter(item => { | 63 | const showingChildren = children.filter(item => { |
58 | if (item.hidden) { | 64 | if (item.hidden) { |
... | @@ -75,6 +81,11 @@ export default { | ... | @@ -75,6 +81,11 @@ export default { |
75 | } | 81 | } |
76 | return false | 82 | return false |
77 | }, | 83 | }, |
84 | /** | ||
85 | * @description: resolvePath | ||
86 | * @param {*} routePath | ||
87 | * @author: renchao | ||
88 | */ | ||
78 | resolvePath (routePath) { | 89 | resolvePath (routePath) { |
79 | if (isExternal(routePath)) { | 90 | if (isExternal(routePath)) { |
80 | return routePath | 91 | return routePath |
... | @@ -86,4 +97,4 @@ export default { | ... | @@ -86,4 +97,4 @@ export default { |
86 | } | 97 | } |
87 | } | 98 | } |
88 | } | 99 | } |
89 | </script> | ||
... | \ No newline at end of file | ... | \ No newline at end of file |
100 | </script> | ... | ... |
... | @@ -26,14 +26,28 @@ export default { | ... | @@ -26,14 +26,28 @@ export default { |
26 | this.scrollWrapper.removeEventListener('scroll', this.emitScroll) | 26 | this.scrollWrapper.removeEventListener('scroll', this.emitScroll) |
27 | }, | 27 | }, |
28 | methods: { | 28 | methods: { |
29 | /** | ||
30 | * @description: handleScroll | ||
31 | * @param {*} e | ||
32 | * @author: renchao | ||
33 | */ | ||
29 | handleScroll (e) { | 34 | handleScroll (e) { |
30 | const eventDelta = e.wheelDelta || -e.deltaY * 40 | 35 | const eventDelta = e.wheelDelta || -e.deltaY * 40 |
31 | const $scrollWrapper = this.scrollWrapper | 36 | const $scrollWrapper = this.scrollWrapper |
32 | $scrollWrapper.scrollLeft = $scrollWrapper.scrollLeft + eventDelta / 4 | 37 | $scrollWrapper.scrollLeft = $scrollWrapper.scrollLeft + eventDelta / 4 |
33 | }, | 38 | }, |
39 | /** | ||
40 | * @description: emitScroll | ||
41 | * @author: renchao | ||
42 | */ | ||
34 | emitScroll () { | 43 | emitScroll () { |
35 | this.$emit('scroll') | 44 | this.$emit('scroll') |
36 | }, | 45 | }, |
46 | /** | ||
47 | * @description: moveToTarget | ||
48 | * @param {*} currentTag | ||
49 | * @author: renchao | ||
50 | */ | ||
37 | moveToTarget (currentTag) { | 51 | moveToTarget (currentTag) { |
38 | const $container = this.$refs.scrollContainer.$el | 52 | const $container = this.$refs.scrollContainer.$el |
39 | const $containerWidth = $container.offsetWidth | 53 | const $containerWidth = $container.offsetWidth | ... | ... |
... | @@ -59,12 +59,28 @@ | ... | @@ -59,12 +59,28 @@ |
59 | this.addTags() | 59 | this.addTags() |
60 | }, | 60 | }, |
61 | methods: { | 61 | methods: { |
62 | /** | ||
63 | * @description: isActive | ||
64 | * @param {*} route | ||
65 | * @author: renchao | ||
66 | */ | ||
62 | isActive (route) { | 67 | isActive (route) { |
63 | return route.path === this.$route.path | 68 | return route.path === this.$route.path |
64 | }, | 69 | }, |
70 | /** | ||
71 | * @description: isAffix | ||
72 | * @param {*} tag | ||
73 | * @author: renchao | ||
74 | */ | ||
65 | isAffix (tag) { | 75 | isAffix (tag) { |
66 | return tag.meta && tag.meta.affix | 76 | return tag.meta && tag.meta.affix |
67 | }, | 77 | }, |
78 | /** | ||
79 | * @description: filterAffixTags | ||
80 | * @param {*} routes | ||
81 | * @param {*} basePath | ||
82 | * @author: renchao | ||
83 | */ | ||
68 | filterAffixTags (routes, basePath = '/') { | 84 | filterAffixTags (routes, basePath = '/') { |
69 | let tags = [] | 85 | let tags = [] |
70 | routes.forEach(route => { | 86 | routes.forEach(route => { |
... | @@ -86,6 +102,10 @@ | ... | @@ -86,6 +102,10 @@ |
86 | }) | 102 | }) |
87 | return tags | 103 | return tags |
88 | }, | 104 | }, |
105 | /** | ||
106 | * @description: initTags | ||
107 | * @author: renchao | ||
108 | */ | ||
89 | initTags () { | 109 | initTags () { |
90 | const affixTags = this.affixTags = this.filterAffixTags(this.routes) | 110 | const affixTags = this.affixTags = this.filterAffixTags(this.routes) |
91 | for (const tag of affixTags) { | 111 | for (const tag of affixTags) { |
... | @@ -95,6 +115,10 @@ | ... | @@ -95,6 +115,10 @@ |
95 | } | 115 | } |
96 | } | 116 | } |
97 | }, | 117 | }, |
118 | /** | ||
119 | * @description: addTags | ||
120 | * @author: renchao | ||
121 | */ | ||
98 | addTags () { | 122 | addTags () { |
99 | const { name } = this.$route | 123 | const { name } = this.$route |
100 | if (name) { | 124 | if (name) { |
... | @@ -102,6 +126,10 @@ | ... | @@ -102,6 +126,10 @@ |
102 | } | 126 | } |
103 | return false | 127 | return false |
104 | }, | 128 | }, |
129 | /** | ||
130 | * @description: moveToCurrentTag | ||
131 | * @author: renchao | ||
132 | */ | ||
105 | moveToCurrentTag () { | 133 | moveToCurrentTag () { |
106 | const tags = this.$refs.tag | 134 | const tags = this.$refs.tag |
107 | this.$nextTick(() => { | 135 | this.$nextTick(() => { |
... | @@ -117,6 +145,11 @@ | ... | @@ -117,6 +145,11 @@ |
117 | } | 145 | } |
118 | }) | 146 | }) |
119 | }, | 147 | }, |
148 | /** | ||
149 | * @description: refreshSelectedTag | ||
150 | * @param {*} view | ||
151 | * @author: renchao | ||
152 | */ | ||
120 | refreshSelectedTag (view) { | 153 | refreshSelectedTag (view) { |
121 | this.$store.dispatch('tagsView/delCachedView', view).then(() => { | 154 | this.$store.dispatch('tagsView/delCachedView', view).then(() => { |
122 | const { fullPath } = view | 155 | const { fullPath } = view |
... | @@ -127,6 +160,11 @@ | ... | @@ -127,6 +160,11 @@ |
127 | }) | 160 | }) |
128 | }) | 161 | }) |
129 | }, | 162 | }, |
163 | /** | ||
164 | * @description: closeSelectedTag | ||
165 | * @param {*} view | ||
166 | * @author: renchao | ||
167 | */ | ||
130 | closeSelectedTag (view) { | 168 | closeSelectedTag (view) { |
131 | this.$store.dispatch('tagsView/delView', view).then(({ visitedViews }) => { | 169 | this.$store.dispatch('tagsView/delView', view).then(({ visitedViews }) => { |
132 | if (this.isActive(view)) { | 170 | if (this.isActive(view)) { |
... | @@ -134,12 +172,21 @@ | ... | @@ -134,12 +172,21 @@ |
134 | } | 172 | } |
135 | }) | 173 | }) |
136 | }, | 174 | }, |
175 | /** | ||
176 | * @description: closeOthersTags | ||
177 | * @author: renchao | ||
178 | */ | ||
137 | closeOthersTags () { | 179 | closeOthersTags () { |
138 | this.$router.push(this.selectedTag) | 180 | this.$router.push(this.selectedTag) |
139 | this.$store.dispatch('tagsView/delOthersViews', this.selectedTag).then(() => { | 181 | this.$store.dispatch('tagsView/delOthersViews', this.selectedTag).then(() => { |
140 | this.moveToCurrentTag() | 182 | this.moveToCurrentTag() |
141 | }) | 183 | }) |
142 | }, | 184 | }, |
185 | /** | ||
186 | * @description: closeAllTags | ||
187 | * @param {*} view | ||
188 | * @author: renchao | ||
189 | */ | ||
143 | closeAllTags (view) { | 190 | closeAllTags (view) { |
144 | this.$store.dispatch('tagsView/delAllViews').then(({ visitedViews }) => { | 191 | this.$store.dispatch('tagsView/delAllViews').then(({ visitedViews }) => { |
145 | if (this.affixTags.some(tag => tag.path === view.path)) { | 192 | if (this.affixTags.some(tag => tag.path === view.path)) { |
... | @@ -148,6 +195,12 @@ | ... | @@ -148,6 +195,12 @@ |
148 | this.toLastView(visitedViews, view) | 195 | this.toLastView(visitedViews, view) |
149 | }) | 196 | }) |
150 | }, | 197 | }, |
198 | /** | ||
199 | * @description: toLastView | ||
200 | * @param {*} visitedViews | ||
201 | * @param {*} view | ||
202 | * @author: renchao | ||
203 | */ | ||
151 | toLastView (visitedViews, view) { | 204 | toLastView (visitedViews, view) { |
152 | const latestView = visitedViews.slice(-1)[0] | 205 | const latestView = visitedViews.slice(-1)[0] |
153 | if (latestView) { | 206 | if (latestView) { |
... | @@ -163,6 +216,12 @@ | ... | @@ -163,6 +216,12 @@ |
163 | } | 216 | } |
164 | } | 217 | } |
165 | }, | 218 | }, |
219 | /** | ||
220 | * @description: openMenu | ||
221 | * @param {*} tag | ||
222 | * @param {*} e | ||
223 | * @author: renchao | ||
224 | */ | ||
166 | openMenu (tag, e) { | 225 | openMenu (tag, e) { |
167 | // const menuMinWidth = 105 | 226 | // const menuMinWidth = 105 |
168 | // const offsetLeft = this.$el.getBoundingClientRect().left // container margin left | 227 | // const offsetLeft = this.$el.getBoundingClientRect().left // container margin left |
... | @@ -179,9 +238,17 @@ | ... | @@ -179,9 +238,17 @@ |
179 | this.visible = true | 238 | this.visible = true |
180 | this.selectedTag = tag | 239 | this.selectedTag = tag |
181 | }, | 240 | }, |
241 | /** | ||
242 | * @description: closeMenu | ||
243 | * @author: renchao | ||
244 | */ | ||
182 | closeMenu () { | 245 | closeMenu () { |
183 | this.visible = false | 246 | this.visible = false |
184 | }, | 247 | }, |
248 | /** | ||
249 | * @description: handleScroll | ||
250 | * @author: renchao | ||
251 | */ | ||
185 | handleScroll () { | 252 | handleScroll () { |
186 | this.closeMenu() | 253 | this.closeMenu() |
187 | } | 254 | } | ... | ... |
... | @@ -27,10 +27,18 @@ export default { | ... | @@ -27,10 +27,18 @@ export default { |
27 | methods: { | 27 | methods: { |
28 | // use $_ for mixins properties | 28 | // use $_ for mixins properties |
29 | // https://vuejs.org/v2/style-guide/index.html#Private-property-names-essential | 29 | // https://vuejs.org/v2/style-guide/index.html#Private-property-names-essential |
30 | /** | ||
31 | * @description: $_isMobile | ||
32 | * @author: renchao | ||
33 | */ | ||
30 | $_isMobile() { | 34 | $_isMobile() { |
31 | const rect = body.getBoundingClientRect() | 35 | const rect = body.getBoundingClientRect() |
32 | return rect.width - 1 < WIDTH | 36 | return rect.width - 1 < WIDTH |
33 | }, | 37 | }, |
38 | /** | ||
39 | * @description: $_resizeHandler | ||
40 | * @author: renchao | ||
41 | */ | ||
34 | $_resizeHandler() { | 42 | $_resizeHandler() { |
35 | if (!document.hidden) { | 43 | if (!document.hidden) { |
36 | const isMobile = this.$_isMobile() | 44 | const isMobile = this.$_isMobile() | ... | ... |
... | @@ -20,6 +20,10 @@ const mutations = { | ... | @@ -20,6 +20,10 @@ const mutations = { |
20 | } | 20 | } |
21 | 21 | ||
22 | const actions = { | 22 | const actions = { |
23 | /** | ||
24 | * @description: generateDic | ||
25 | * @author: renchao | ||
26 | */ | ||
23 | generateDic ({ commit }) { | 27 | generateDic ({ commit }) { |
24 | return new Promise(async (resolve) => { | 28 | return new Promise(async (resolve) => { |
25 | let { result: res } = await getAllDict() | 29 | let { result: res } = await getAllDict() |
... | @@ -27,6 +31,10 @@ const actions = { | ... | @@ -27,6 +31,10 @@ const actions = { |
27 | resolve(true) | 31 | resolve(true) |
28 | }) | 32 | }) |
29 | }, | 33 | }, |
34 | /** | ||
35 | * @description: resetdict | ||
36 | * @author: renchao | ||
37 | */ | ||
30 | resetdict ({ commit }) { | 38 | resetdict ({ commit }) { |
31 | commit('RESET_DICT') | 39 | commit('RESET_DICT') |
32 | } | 40 | } | ... | ... |
... | @@ -6,7 +6,7 @@ | ... | @@ -6,7 +6,7 @@ |
6 | 6 | ||
7 | import Layout from '@/layout' | 7 | import Layout from '@/layout' |
8 | /** | 8 | /** |
9 | * @description: | 9 | * @description: |
10 | * @param {*} routers | 10 | * @param {*} routers |
11 | * @author: renchao | 11 | * @author: renchao |
12 | */ | 12 | */ |
... | @@ -30,6 +30,11 @@ export default function filterAsyncRouter (routers) { | ... | @@ -30,6 +30,11 @@ export default function filterAsyncRouter (routers) { |
30 | }) | 30 | }) |
31 | return routers | 31 | return routers |
32 | } | 32 | } |
33 | /** | ||
34 | * @description: loadView | ||
35 | * @param {*} view | ||
36 | * @author: renchao | ||
37 | */ | ||
33 | function loadView (view) { | 38 | function loadView (view) { |
34 | return r => require.ensure([], () => r(require(`@/views${view}.vue`))) | 39 | return r => require.ensure([], () => r(require(`@/views${view}.vue`))) |
35 | } | ||
... | \ No newline at end of file | ... | \ No newline at end of file |
40 | } | ... | ... |
... | @@ -2,7 +2,18 @@ import {loadModules} from 'esri-loader' | ... | @@ -2,7 +2,18 @@ import {loadModules} from 'esri-loader' |
2 | 2 | ||
3 | export default { | 3 | export default { |
4 | methods: { | 4 | methods: { |
5 | 5 | /** | |
6 | * @description: identify | ||
7 | * @param {*} url | ||
8 | * @param {*} layerIds | ||
9 | * @param {*} geometry | ||
10 | * @param {*} callBackFunction | ||
11 | * @param {*} returnGeometry | ||
12 | * @param {*} layerOption | ||
13 | * @param {*} tolerance | ||
14 | * @param {*} mapExtent | ||
15 | * @author: renchao | ||
16 | */ | ||
6 | identify(url,layerIds,geometry,callBackFunction,returnGeometry,layerOption,tolerance,mapExtent){ | 17 | identify(url,layerIds,geometry,callBackFunction,returnGeometry,layerOption,tolerance,mapExtent){ |
7 | var self = this; | 18 | var self = this; |
8 | loadModules([ | 19 | loadModules([ |
... | @@ -19,7 +30,7 @@ export default { | ... | @@ -19,7 +30,7 @@ export default { |
19 | identifyParameters.geometry = geometry; | 30 | identifyParameters.geometry = geometry; |
20 | if(layerIds){ | 31 | if(layerIds){ |
21 | identifyParameters.layerIds = layerIds; | 32 | identifyParameters.layerIds = layerIds; |
22 | } | 33 | } |
23 | identifyParameters.layerOption = layerOption ? layerOption : "all"; | 34 | identifyParameters.layerOption = layerOption ? layerOption : "all"; |
24 | identifyParameters.tolerance = tolerance ? tolerance : 3; | 35 | identifyParameters.tolerance = tolerance ? tolerance : 3; |
25 | identifyParameters.mapExtent = mapExtent ? mapExtent : geometry.extent; | 36 | identifyParameters.mapExtent = mapExtent ? mapExtent : geometry.extent; |
... | @@ -34,7 +45,7 @@ export default { | ... | @@ -34,7 +45,7 @@ export default { |
34 | }).catch(err => { | 45 | }).catch(err => { |
35 | throw(err); | 46 | throw(err); |
36 | }); | 47 | }); |
37 | 48 | ||
38 | } | 49 | } |
39 | } | 50 | } |
40 | } | ||
... | \ No newline at end of file | ... | \ No newline at end of file |
51 | } | ... | ... |
1 | import {maps} from '@/libs/map/mapUtils' | 1 | import {maps} from '@/libs/map/mapUtils' |
2 | import {loadModules} from 'esri-loader' | 2 | import {loadModules} from 'esri-loader' |
3 | 3 | ||
4 | export default { | 4 | export default { |
... | @@ -10,6 +10,14 @@ export default { | ... | @@ -10,6 +10,14 @@ export default { |
10 | } | 10 | } |
11 | }, | 11 | }, |
12 | methods: { | 12 | methods: { |
13 | /** | ||
14 | * @description: initDraw | ||
15 | * @param {*} type | ||
16 | * @param {*} viewId | ||
17 | * @param {*} creationMode | ||
18 | * @param {*} callBackFunction | ||
19 | * @author: renchao | ||
20 | */ | ||
13 | initDraw(type,viewId,creationMode,callBackFunction){ | 21 | initDraw(type,viewId,creationMode,callBackFunction){ |
14 | var self = this; | 22 | var self = this; |
15 | loadModules([ | 23 | loadModules([ |
... | @@ -46,17 +54,21 @@ export default { | ... | @@ -46,17 +54,21 @@ export default { |
46 | if(callBackFunction && typeof callBackFunction == 'function'){ | 54 | if(callBackFunction && typeof callBackFunction == 'function'){ |
47 | callBackFunction(event.graphic.geometry); | 55 | callBackFunction(event.graphic.geometry); |
48 | } | 56 | } |
49 | 57 | ||
50 | } | 58 | } |
51 | }) | 59 | }) |
52 | }).catch(err=>{ | 60 | }).catch(err=>{ |
53 | throw(err); | 61 | throw(err); |
54 | }); | 62 | }); |
55 | }, | 63 | }, |
64 | /** | ||
65 | * @description: destroyeDraw | ||
66 | * @author: renchao | ||
67 | */ | ||
56 | destroyeDraw() { | 68 | destroyeDraw() { |
57 | if(this.drawAction){ | 69 | if(this.drawAction){ |
58 | this.drawAction.cancel(); | 70 | this.drawAction.cancel(); |
59 | } | 71 | } |
60 | } | 72 | } |
61 | } | 73 | } |
62 | } | ||
... | \ No newline at end of file | ... | \ No newline at end of file |
74 | } | ... | ... |
... | @@ -5,6 +5,13 @@ import {loadModules} from "esri-loader" | ... | @@ -5,6 +5,13 @@ import {loadModules} from "esri-loader" |
5 | 5 | ||
6 | export default { | 6 | export default { |
7 | methods:{ | 7 | methods:{ |
8 | /** | ||
9 | * @description: addGraphic | ||
10 | * @param {*} url | ||
11 | * @param {*} graphic | ||
12 | * @param {*} callBackFunction | ||
13 | * @author: renchao | ||
14 | */ | ||
8 | addGraphic(url,graphic,callBackFunction){ | 15 | addGraphic(url,graphic,callBackFunction){ |
9 | loadModules([ | 16 | loadModules([ |
10 | "esri/layers/FeatureLayer", | 17 | "esri/layers/FeatureLayer", |
... | @@ -57,6 +64,13 @@ export default { | ... | @@ -57,6 +64,13 @@ export default { |
57 | throw (err); | 64 | throw (err); |
58 | }) | 65 | }) |
59 | }, | 66 | }, |
67 | /** | ||
68 | * @description: updateGraphic | ||
69 | * @param {*} url | ||
70 | * @param {*} graphic | ||
71 | * @param {*} callBackFunction | ||
72 | * @author: renchao | ||
73 | */ | ||
60 | updateGraphic(url,graphic,callBackFunction){ | 74 | updateGraphic(url,graphic,callBackFunction){ |
61 | loadModules([ | 75 | loadModules([ |
62 | "esri/layers/FeatureLayer", | 76 | "esri/layers/FeatureLayer", |
... | @@ -107,6 +121,13 @@ export default { | ... | @@ -107,6 +121,13 @@ export default { |
107 | throw (err); | 121 | throw (err); |
108 | }) | 122 | }) |
109 | }, | 123 | }, |
124 | /** | ||
125 | * @description: delGraphic | ||
126 | * @param {*} url | ||
127 | * @param {*} graphic | ||
128 | * @param {*} callBackFunction | ||
129 | * @author: renchao | ||
130 | */ | ||
110 | delGraphic(url,graphic,callBackFunction){ | 131 | delGraphic(url,graphic,callBackFunction){ |
111 | loadModules([ | 132 | loadModules([ |
112 | "esri/layers/FeatureLayer", | 133 | "esri/layers/FeatureLayer", |
... | @@ -160,4 +181,4 @@ export default { | ... | @@ -160,4 +181,4 @@ export default { |
160 | }) | 181 | }) |
161 | } | 182 | } |
162 | } | 183 | } |
163 | } | ||
... | \ No newline at end of file | ... | \ No newline at end of file |
184 | } | ... | ... |
... | @@ -3,6 +3,16 @@ import {loadModules} from 'esri-loader' | ... | @@ -3,6 +3,16 @@ import {loadModules} from 'esri-loader' |
3 | export default { | 3 | export default { |
4 | 4 | ||
5 | methods:{ | 5 | methods:{ |
6 | /** | ||
7 | * @description: findByPro | ||
8 | * @param {*} url | ||
9 | * @param {*} layerIds | ||
10 | * @param {*} searchFields | ||
11 | * @param {*} searchText | ||
12 | * @param {*} returnGeometry | ||
13 | * @param {*} callBackFunction | ||
14 | * @author: renchao | ||
15 | */ | ||
6 | findByPro(url,layerIds,searchFields,searchText,returnGeometry,callBackFunction){ | 16 | findByPro(url,layerIds,searchFields,searchText,returnGeometry,callBackFunction){ |
7 | loadModules([ | 17 | loadModules([ |
8 | "esri/tasks/FindTask", | 18 | "esri/tasks/FindTask", |
... | @@ -32,4 +42,4 @@ export default { | ... | @@ -32,4 +42,4 @@ export default { |
32 | } | 42 | } |
33 | 43 | ||
34 | } | 44 | } |
35 | } | ||
... | \ No newline at end of file | ... | \ No newline at end of file |
45 | } | ... | ... |
... | @@ -9,6 +9,12 @@ | ... | @@ -9,6 +9,12 @@ |
9 | } | 9 | } |
10 | }, | 10 | }, |
11 | methods: { | 11 | methods: { |
12 | /** | ||
13 | * @description: measure | ||
14 | * @param {*} viewId | ||
15 | * @param {*} type | ||
16 | * @author: renchao | ||
17 | */ | ||
12 | measure(viewId,type){ | 18 | measure(viewId,type){ |
13 | var view = maps[viewId]; | 19 | var view = maps[viewId]; |
14 | var self = this; | 20 | var self = this; |
... | @@ -35,8 +41,8 @@ | ... | @@ -35,8 +41,8 @@ |
35 | view: view | 41 | view: view |
36 | }); | 42 | }); |
37 | } | 43 | } |
38 | 44 | ||
39 | 45 | ||
40 | // skip the initial 'new measurement' button | 46 | // skip the initial 'new measurement' button |
41 | self.areaActive.viewModel.start(); | 47 | self.areaActive.viewModel.start(); |
42 | break; | 48 | break; |
... | @@ -59,4 +65,4 @@ | ... | @@ -59,4 +65,4 @@ |
59 | } | 65 | } |
60 | 66 | ||
61 | } | 67 | } |
62 | } | ||
... | \ No newline at end of file | ... | \ No newline at end of file |
68 | } | ... | ... |
... | @@ -4,6 +4,17 @@ import {loadModules} from 'esri-loader' | ... | @@ -4,6 +4,17 @@ import {loadModules} from 'esri-loader' |
4 | export default{ | 4 | export default{ |
5 | 5 | ||
6 | methods: { | 6 | methods: { |
7 | /** | ||
8 | * @description: queryByWhere | ||
9 | * @param {*} url | ||
10 | * @param {*} queryWhere | ||
11 | * @param {*} geometry | ||
12 | * @param {*} returnGeometry | ||
13 | * @param {*} outFields | ||
14 | * @param {*} outSpatialReference | ||
15 | * @param {*} callBackFunction | ||
16 | * @author: renchao | ||
17 | */ | ||
7 | queryByWhere(url,queryWhere,geometry,returnGeometry,outFields ,outSpatialReference ,callBackFunction){ | 18 | queryByWhere(url,queryWhere,geometry,returnGeometry,outFields ,outSpatialReference ,callBackFunction){ |
8 | var self = this; | 19 | var self = this; |
9 | loadModules([ | 20 | loadModules([ |
... | @@ -55,6 +66,11 @@ export default{ | ... | @@ -55,6 +66,11 @@ export default{ |
55 | throw(err); | 66 | throw(err); |
56 | }) | 67 | }) |
57 | }, | 68 | }, |
69 | /** | ||
70 | * @description: parseObj2Arr | ||
71 | * @param {*} object | ||
72 | * @author: renchao | ||
73 | */ | ||
58 | parseObj2Arr(object){ | 74 | parseObj2Arr(object){ |
59 | var arr = []; | 75 | var arr = []; |
60 | for(var key in object){ | 76 | for(var key in object){ |
... | @@ -64,6 +80,6 @@ export default{ | ... | @@ -64,6 +80,6 @@ export default{ |
64 | arr.push(obj); | 80 | arr.push(obj); |
65 | } | 81 | } |
66 | return arr; | 82 | return arr; |
67 | } | 83 | } |
68 | }, | 84 | }, |
69 | } | 85 | } | ... | ... |
... | @@ -4,8 +4,14 @@ export default{ | ... | @@ -4,8 +4,14 @@ export default{ |
4 | 4 | ||
5 | methods: { | 5 | methods: { |
6 | 6 | ||
7 | /** | ||
8 | * @description: readShpByFile | ||
9 | * @param {*} file | ||
10 | * @param {*} callBackFunction | ||
11 | * @author: renchao | ||
12 | */ | ||
7 | readShpByFile(file,callBackFunction){ | 13 | readShpByFile(file,callBackFunction){ |
8 | var reader = new FileReader(); | 14 | var reader = new FileReader(); |
9 | reader.readAsBinaryString(file); | 15 | reader.readAsBinaryString(file); |
10 | reader.οnlοad=function(){ | 16 | reader.οnlοad=function(){ |
11 | var fileData = this.result ; //fileData就是读取到的文件的二进制数据 | 17 | var fileData = this.result ; //fileData就是读取到的文件的二进制数据 |
... | @@ -20,6 +26,12 @@ export default{ | ... | @@ -20,6 +26,12 @@ export default{ |
20 | .catch(error => console.error(error.stack)); | 26 | .catch(error => console.error(error.stack)); |
21 | } | 27 | } |
22 | }, | 28 | }, |
29 | /** | ||
30 | * @description: readShpByFile | ||
31 | * @param {*} url | ||
32 | * @param {*} callBackFunction | ||
33 | * @author: renchao | ||
34 | */ | ||
23 | readShpByUrl(url,callBackFunction){ | 35 | readShpByUrl(url,callBackFunction){ |
24 | open(url).then(source => source.read() | 36 | open(url).then(source => source.read() |
25 | .then(function log(result) { | 37 | .then(function log(result) { |
... | @@ -32,8 +44,14 @@ export default{ | ... | @@ -32,8 +44,14 @@ export default{ |
32 | .catch(error => console.error(error.stack)); | 44 | .catch(error => console.error(error.stack)); |
33 | } | 45 | } |
34 | }, | 46 | }, |
47 | /** | ||
48 | * @description: readShpByZip | ||
49 | * @param {*} zipUrl | ||
50 | * @param {*} callBackFunction | ||
51 | * @author: renchao | ||
52 | */ | ||
35 | readShpByZip(zipUrl,callBackFunction){ | 53 | readShpByZip(zipUrl,callBackFunction){ |
36 | 54 | ||
37 | } | 55 | } |
38 | 56 | ||
39 | } | ||
... | \ No newline at end of file | ... | \ No newline at end of file |
57 | } | ... | ... |
... | @@ -21,12 +21,21 @@ export default { | ... | @@ -21,12 +21,21 @@ export default { |
21 | this.handleSearch() | 21 | this.handleSearch() |
22 | }, | 22 | }, |
23 | methods: { | 23 | methods: { |
24 | /** | ||
25 | * @description: handkeyCode | ||
26 | * @param {*} e | ||
27 | * @author: renchao | ||
28 | */ | ||
24 | handkeyCode(e) { | 29 | handkeyCode(e) { |
25 | if(e.keyCode === 13){ | 30 | if(e.keyCode === 13){ |
26 | console.log("安"); | 31 | console.log("安"); |
27 | this.handleSearch() | 32 | this.handleSearch() |
28 | } | 33 | } |
29 | }, | 34 | }, |
35 | /** | ||
36 | * @description: handleSearch | ||
37 | * @author: renchao | ||
38 | */ | ||
30 | handleSearch(){ | 39 | handleSearch(){ |
31 | this.pageData.currentPage = 1 | 40 | this.pageData.currentPage = 1 |
32 | if (this.fetchData) { | 41 | if (this.fetchData) { |
... | @@ -36,22 +45,41 @@ export default { | ... | @@ -36,22 +45,41 @@ export default { |
36 | this.queryClick() | 45 | this.queryClick() |
37 | } | 46 | } |
38 | }, | 47 | }, |
48 | /** | ||
49 | * @description: handleSizeChange | ||
50 | * @param {*} val | ||
51 | * @author: renchao | ||
52 | */ | ||
39 | handleSizeChange (val) { | 53 | handleSizeChange (val) { |
40 | this.pageData.currentPage = 1 | 54 | this.pageData.currentPage = 1 |
41 | this.pageData.pageSize = val | 55 | this.pageData.pageSize = val |
42 | this.queryClick() | 56 | this.queryClick() |
43 | }, | 57 | }, |
58 | /** | ||
59 | * @description: handleCurrentChange | ||
60 | * @param {*} val | ||
61 | * @author: renchao | ||
62 | */ | ||
44 | handleCurrentChange (val) { | 63 | handleCurrentChange (val) { |
45 | this.pageData.currentPage = val | 64 | this.pageData.currentPage = val |
46 | if (this.queryClick) { | 65 | if (this.queryClick) { |
47 | this.queryClick() | 66 | this.queryClick() |
48 | } | 67 | } |
49 | }, | 68 | }, |
69 | /** | ||
70 | * @description: handleDel | ||
71 | * @author: renchao | ||
72 | */ | ||
50 | handleDel () { | 73 | handleDel () { |
51 | let deleteAfterPage = Math.ceil((this.tableData.total - 1) / this.pageData.pageSize) | 74 | let deleteAfterPage = Math.ceil((this.tableData.total - 1) / this.pageData.pageSize) |
52 | let currentPage = this.pageData.currentPage > deleteAfterPage ? deleteAfterPage : this.pageData.currentPage | 75 | let currentPage = this.pageData.currentPage > deleteAfterPage ? deleteAfterPage : this.pageData.currentPage |
53 | this.pageData.currentPage = currentPage < 1 ? 1 : currentPage | 76 | this.pageData.currentPage = currentPage < 1 ? 1 : currentPage |
54 | }, | 77 | }, |
78 | /** | ||
79 | * @description: resetForm | ||
80 | * @param {*} isYwbl | ||
81 | * @author: renchao | ||
82 | */ | ||
55 | resetForm(isYwbl){ | 83 | resetForm(isYwbl){ |
56 | if (isYwbl) { | 84 | if (isYwbl) { |
57 | this.queryForm = defaultParameters.defaultParameters(); | 85 | this.queryForm = defaultParameters.defaultParameters(); | ... | ... |
1 | <!-- | ||
2 | * @Description: | ||
3 | * @Autor: renchao | ||
4 | * @LastEditTime: 2023-07-20 13:40:27 | ||
5 | --> | ||
1 | <template> | 6 | <template> |
2 | <dialogBox title="配置常办项目" @submitForm="submitForm" saveButton="保存" :isFullscreen="false" width="50%" | 7 | <dialogBox title="配置常办项目" @submitForm="submitForm" saveButton="保存" :isFullscreen="false" width="50%" |
3 | @closeDialog="closeDialog" v-model="myValue"> | 8 | @closeDialog="closeDialog" v-model="myValue"> |
... | @@ -6,103 +11,103 @@ | ... | @@ -6,103 +11,103 @@ |
6 | </dialogBox> | 11 | </dialogBox> |
7 | </template> | 12 | </template> |
8 | <script> | 13 | <script> |
9 | import { getMenuInfo } from "@/api/user.js"; | 14 | import { getMenuInfo } from "@/api/user.js"; |
10 | import Tree from "@/components/Tree/src/tree.vue" | 15 | import Tree from "@/components/Tree/src/tree.vue" |
11 | import { saveFrequentProjectsList, getHomeFrequentProjects } from "@/api/home.js"; | 16 | import { saveFrequentProjectsList, getHomeFrequentProjects } from "@/api/home.js"; |
12 | export default { | 17 | export default { |
13 | components: { | 18 | components: { |
14 | Tree | 19 | Tree |
15 | }, | 20 | }, |
16 | props: { | 21 | props: { |
17 | value: { type: Boolean, default: false }, | 22 | value: { type: Boolean, default: false }, |
18 | bindItem: { type: Array, default: [] } | 23 | bindItem: { type: Array, default: [] } |
19 | }, | 24 | }, |
20 | data () { | 25 | data () { |
21 | return { | 26 | return { |
22 | myValue: false, | 27 | myValue: false, |
23 | defaultCheckeds: [], | 28 | defaultCheckeds: [], |
24 | projectList: [], | 29 | projectList: [], |
25 | checkedItem: [], | 30 | checkedItem: [], |
26 | defaultProps: { | 31 | defaultProps: { |
27 | children: "children", | 32 | children: "children", |
28 | label: "name", | 33 | label: "name", |
29 | disabled: function (data, node) { | 34 | disabled: function (data, node) { |
30 | if (data.children && data.children.length > 0) { | 35 | if (data.children && data.children.length > 0) { |
31 | return true | 36 | return true |
32 | } else { | 37 | } else { |
33 | return false | 38 | return false |
39 | } | ||
34 | } | 40 | } |
35 | } | 41 | }, |
36 | }, | 42 | uniqueValue: ''//最后拿到的唯一选择的moduldCode值,相当于id |
37 | uniqueValue: ''//最后拿到的唯一选择的moduldCode值,相当于id | ||
38 | } | ||
39 | }, | ||
40 | watch: { | ||
41 | value (val) { | ||
42 | this.myValue = val | ||
43 | if (val) { | ||
44 | this.queryClick() | ||
45 | } | 43 | } |
46 | } | ||
47 | }, | ||
48 | mounted () { | ||
49 | this.dealCheckedItem(); | ||
50 | }, | ||
51 | methods: { | ||
52 | submitForm () { | ||
53 | var checkedNodes = this.$refs.tree.getCheckedNodes(); | ||
54 | if (checkedNodes.length > 6) { | ||
55 | this.$message.error("最多选择6个项目!"); | ||
56 | return | ||
57 | } | ||
58 | saveFrequentProjectsList(checkedNodes).then(res => { | ||
59 | if (res.code == 200) { | ||
60 | this.$parent.queryProjectList(); | ||
61 | this.$message.success("保存成功"); | ||
62 | this.$emit("input", false); | ||
63 | } else { | ||
64 | this.$message.error(res.message); | ||
65 | } | ||
66 | }) | ||
67 | }, | 44 | }, |
68 | queryClick () { | 45 | watch: { |
69 | let that = this | 46 | value (val) { |
70 | getMenuInfo().then(res => { | 47 | this.myValue = val |
71 | this.projectList = res.result.slice(0, -2) | 48 | if (val) { |
72 | }) | 49 | this.queryClick() |
73 | function lookForAllId (arr = []) { | ||
74 | for (let item of that.bindItem) { | ||
75 | arr.push(item.id) | ||
76 | if (item.children && item.children.length) lookForAllId(item.children, arr) | ||
77 | } | 50 | } |
78 | return arr | ||
79 | } | 51 | } |
80 | this.defaultCheckeds = lookForAllId() | ||
81 | }, | 52 | }, |
82 | dealCheckedItem () { | 53 | mounted () { |
54 | this.dealCheckedItem(); | ||
83 | }, | 55 | }, |
84 | //关闭窗口 | 56 | methods: { |
85 | closeDialog () { | 57 | submitForm () { |
86 | this.$emit("input", false); | 58 | var checkedNodes = this.$refs.tree.getCheckedNodes(); |
87 | }, | 59 | if (checkedNodes.length > 6) { |
88 | //节点选择状态发生改变时 | 60 | this.$message.error("最多选择6个项目!"); |
89 | handleClick (data, checked, node) { | 61 | return |
90 | var checkedNodes = this.$refs.tree.getCheckedNodes(); | 62 | } |
91 | if (checkedNodes.length > 6) { | 63 | saveFrequentProjectsList(checkedNodes).then(res => { |
92 | this.$message({ | 64 | if (res.code == 200) { |
93 | message: '最后选择6条数据', | 65 | this.$parent.queryProjectList(); |
94 | type: 'warning', | 66 | this.$message.success("保存成功"); |
95 | customClass: 'messageIndex' | 67 | this.$emit("input", false); |
68 | } else { | ||
69 | this.$message.error(res.message); | ||
70 | } | ||
71 | }) | ||
72 | }, | ||
73 | queryClick () { | ||
74 | let that = this | ||
75 | getMenuInfo().then(res => { | ||
76 | this.projectList = res.result.slice(0, -2) | ||
96 | }) | 77 | }) |
97 | this.$refs.tree.setChecked(data, false) // 取消当前节点的选中状态 | 78 | function lookForAllId (arr = []) { |
79 | for (let item of that.bindItem) { | ||
80 | arr.push(item.id) | ||
81 | if (item.children && item.children.length) lookForAllId(item.children, arr) | ||
82 | } | ||
83 | return arr | ||
84 | } | ||
85 | this.defaultCheckeds = lookForAllId() | ||
86 | }, | ||
87 | dealCheckedItem () { | ||
88 | }, | ||
89 | //关闭窗口 | ||
90 | closeDialog () { | ||
91 | this.$emit("input", false); | ||
92 | }, | ||
93 | //节点选择状态发生改变时 | ||
94 | handleClick (data, checked, node) { | ||
95 | var checkedNodes = this.$refs.tree.getCheckedNodes(); | ||
96 | if (checkedNodes.length > 6) { | ||
97 | this.$message({ | ||
98 | message: '最后选择6条数据', | ||
99 | type: 'warning', | ||
100 | customClass: 'messageIndex' | ||
101 | }) | ||
102 | this.$refs.tree.setChecked(data, false) // 取消当前节点的选中状态 | ||
103 | } | ||
98 | } | 104 | } |
99 | } | 105 | } |
100 | } | 106 | } |
101 | } | ||
102 | </script> | 107 | </script> |
103 | <style scoped lang='scss'> | 108 | <style scoped lang='scss'> |
104 | /deep/.el-tree-node.is-expanded>.el-tree-node__children { | 109 | /deep/.el-tree-node.is-expanded > .el-tree-node__children { |
105 | display: flex; | 110 | display: flex; |
106 | flex-wrap: wrap; | 111 | flex-wrap: wrap; |
107 | } | 112 | } |
108 | </style> | 113 | </style> | ... | ... |
1 | <!-- | ||
2 | * @Description: | ||
3 | * @Autor: renchao | ||
4 | * @LastEditTime: 2023-07-20 13:40:32 | ||
5 | --> | ||
1 | <template> | 6 | <template> |
2 | <div class="model"> | 7 | <div class="model"> |
3 | <div class="mask">123</div> | 8 | <div class="mask">123</div> |
... | @@ -18,71 +23,71 @@ | ... | @@ -18,71 +23,71 @@ |
18 | 23 | ||
19 | 24 | ||
20 | <style scoped lang='scss'> | 25 | <style scoped lang='scss'> |
21 | //css部分 | 26 | //css部分 |
22 | .mask { | 27 | .mask { |
23 | position: fixed; //这里用固定定位,后面设置动画时才不受影响 | 28 | position: fixed; //这里用固定定位,后面设置动画时才不受影响 |
24 | top: 0; | 29 | top: 0; |
25 | height: 100%; | 30 | height: 100%; |
26 | width: 100%; | 31 | width: 100%; |
27 | background-color: rgba(167, 165, 165, 0.486); | 32 | background-color: rgba(167, 165, 165, 0.486); |
28 | opacity: 0.5; | 33 | opacity: 0.5; |
29 | z-index: 9; | 34 | z-index: 9; |
30 | } | 35 | } |
31 | .model-dialog { | 36 | .model-dialog { |
32 | position: absolute; | 37 | position: absolute; |
33 | //让弹框居中显示 | 38 | //让弹框居中显示 |
34 | top: 50%; | 39 | top: 50%; |
35 | left: 50%; | 40 | left: 50%; |
36 | transform: translate(-50%, -50%); | 41 | transform: translate(-50%, -50%); |
37 | background-color: #fff; | 42 | background-color: #fff; |
38 | border-radius: 12px; | 43 | border-radius: 12px; |
39 | width: 600px; | 44 | width: 600px; |
40 | height: 300px; | 45 | height: 300px; |
41 | border: 1px solid #f5f5f5; | 46 | border: 1px solid #f5f5f5; |
42 | overflow: hidden; | 47 | overflow: hidden; |
43 | z-index: 10; //这里注意层级要比mask大,覆盖它 | 48 | z-index: 10; //这里注意层级要比mask大,覆盖它 |
44 | } | 49 | } |
45 | .model-header { | 50 | .model-header { |
46 | position: relative; | 51 | position: relative; |
47 | height: 50px; | 52 | height: 50px; |
48 | padding-left: 10px; | 53 | padding-left: 10px; |
49 | padding-top: 10px; | 54 | padding-top: 10px; |
50 | font-size: 20px; | 55 | font-size: 20px; |
51 | line-height: 50px; | 56 | line-height: 50px; |
52 | background-color: #f5f5f5; | 57 | background-color: #f5f5f5; |
53 | border-bottom: 1px solid rgb(177, 176, 176); | 58 | border-bottom: 1px solid rgb(177, 176, 176); |
54 | } | 59 | } |
55 | .model-body { | 60 | .model-body { |
56 | height: 150px; | 61 | height: 150px; |
57 | line-height: 150px; | 62 | line-height: 150px; |
58 | font-size: 28px; | 63 | font-size: 28px; |
59 | text-align: center; | 64 | text-align: center; |
60 | background-color: #fff; | 65 | background-color: #fff; |
61 | } | 66 | } |
62 | .model-footer { | 67 | .model-footer { |
63 | background-color: #f5f5f5; | 68 | background-color: #f5f5f5; |
64 | height: 100px; | 69 | height: 100px; |
65 | text-align: center; | 70 | text-align: center; |
66 | line-height: 100px; | 71 | line-height: 100px; |
67 | } | 72 | } |
68 | .btn { | 73 | .btn { |
69 | width: 180px; | 74 | width: 180px; |
70 | height: 40px; | 75 | height: 40px; |
71 | border-radius: 8px; | 76 | border-radius: 8px; |
72 | background-color: rgb(180, 103, 103); | 77 | background-color: rgb(180, 103, 103); |
73 | color: #fff; | 78 | color: #fff; |
74 | font-size: 18px; | 79 | font-size: 18px; |
75 | border: none; | 80 | border: none; |
76 | } | 81 | } |
77 | .icon-close { | 82 | .icon-close { |
78 | position: absolute; //如果不加绝对布局,图表显示不出来 | 83 | position: absolute; //如果不加绝对布局,图表显示不出来 |
79 | background-color: pink; | 84 | background-color: pink; |
80 | right: 15px; | 85 | right: 15px; |
81 | top: 16px; | 86 | top: 16px; |
82 | width: 30px; | 87 | width: 30px; |
83 | height: 30px; | 88 | height: 30px; |
84 | z-index: 10; | 89 | z-index: 10; |
85 | //background: url("../assets/icon-close.png") no-repeat; | 90 | //background: url("../assets/icon-close.png") no-repeat; |
86 | background-size: contain; | 91 | background-size: contain; |
87 | } | 92 | } |
88 | </style> | 93 | </style> |
... | \ No newline at end of file | ... | \ No newline at end of file | ... | ... |
... | @@ -147,7 +147,8 @@ | ... | @@ -147,7 +147,8 @@ |
147 | if (this.supplementarylist.length) { | 147 | if (this.supplementarylist.length) { |
148 | this.unitClick(0) | 148 | this.unitClick(0) |
149 | } else { | 149 | } else { |
150 | this.$emit("getCurrentSelectProps", this.currentSelectProps); | 150 | this.loadBdcdylist() |
151 | // this.$emit("getCurrentSelectProps", this.currentSelectProps); | ||
151 | } | 152 | } |
152 | }); | 153 | }); |
153 | }, | 154 | }, |
... | @@ -179,7 +180,6 @@ | ... | @@ -179,7 +180,6 @@ |
179 | }); | 180 | }); |
180 | this.$nextTick(() => { | 181 | this.$nextTick(() => { |
181 | this.getleftMenubl(); | 182 | this.getleftMenubl(); |
182 | this.blxxClick() | ||
183 | if (!this.supplementarylist.length) { | 183 | if (!this.supplementarylist.length) { |
184 | getdjblist() | 184 | getdjblist() |
185 | } | 185 | } |
... | @@ -285,5 +285,8 @@ | ... | @@ -285,5 +285,8 @@ |
285 | height: 27px; | 285 | height: 27px; |
286 | float: left; | 286 | float: left; |
287 | } | 287 | } |
288 | .el-icon-delete:hover{ | ||
289 | color: #0079fe; | ||
290 | } | ||
288 | } | 291 | } |
289 | </style> | 292 | </style> | ... | ... |
This diff is collapsed.
Click to expand it.
... | @@ -103,7 +103,7 @@ | ... | @@ -103,7 +103,7 @@ |
103 | </el-form-item> | 103 | </el-form-item> |
104 | </el-col> | 104 | </el-col> |
105 | </el-row> | 105 | </el-row> |
106 | <el-row :gutter="10"> | 106 | <!-- <el-row :gutter="10"> |
107 | <el-col :span="8"> | 107 | <el-col :span="8"> |
108 | <el-form-item label="使用期限:"> | 108 | <el-form-item label="使用期限:"> |
109 | <el-input v-model="ruleForm.jsydsyq.tdsyqx"></el-input> | 109 | <el-input v-model="ruleForm.jsydsyq.tdsyqx"></el-input> |
... | @@ -115,7 +115,7 @@ | ... | @@ -115,7 +115,7 @@ |
115 | <el-input v-model="ruleForm.jsydsyq.syqqzsj"></el-input> | 115 | <el-input v-model="ruleForm.jsydsyq.syqqzsj"></el-input> |
116 | </el-form-item> | 116 | </el-form-item> |
117 | </el-col> | 117 | </el-col> |
118 | </el-row> | 118 | </el-row> --> |
119 | <el-row :gutter="10"> | 119 | <el-row :gutter="10"> |
120 | <el-col> | 120 | <el-col> |
121 | <el-form-item label="附记:" prop="fj"> | 121 | <el-form-item label="附记:" prop="fj"> | ... | ... |
... | @@ -105,7 +105,7 @@ | ... | @@ -105,7 +105,7 @@ |
105 | </el-form-item> | 105 | </el-form-item> |
106 | </el-col> | 106 | </el-col> |
107 | </el-row> | 107 | </el-row> |
108 | <el-row :gutter="10"> | 108 | <!-- <el-row :gutter="10"> |
109 | <el-col :span="8"> | 109 | <el-col :span="8"> |
110 | <el-form-item label="使用期限:"> | 110 | <el-form-item label="使用期限:"> |
111 | <el-input disabled v-model="ruleForm.jsydsyq.tdsyqx"></el-input> | 111 | <el-input disabled v-model="ruleForm.jsydsyq.tdsyqx"></el-input> |
... | @@ -117,7 +117,7 @@ | ... | @@ -117,7 +117,7 @@ |
117 | <el-input disabled v-model="ruleForm.jsydsyq.syqqzsj"></el-input> | 117 | <el-input disabled v-model="ruleForm.jsydsyq.syqqzsj"></el-input> |
118 | </el-form-item> | 118 | </el-form-item> |
119 | </el-col> | 119 | </el-col> |
120 | </el-row> | 120 | </el-row> --> |
121 | <el-row :gutter="10"> | 121 | <el-row :gutter="10"> |
122 | <el-col> | 122 | <el-col> |
123 | <el-form-item label="附记:" prop="fj"> | 123 | <el-form-item label="附记:" prop="fj"> | ... | ... |
-
Please register or sign in to post a comment