Merge branch 'dev'
Showing
46 changed files
with
2052 additions
and
758 deletions
| 1 | <!-- | ||
| 2 | * @Description: | ||
| 3 | * @Autor: renchao | ||
| 4 | * @LastEditTime: 2023-07-20 10:22:20 | ||
| 5 | --> | ||
| 1 | <template> | 6 | <template> |
| 2 | <label class="el-checkbox" :class="[ | 7 | <label class="el-checkbox" :class="[ |
| 3 | border && checkboxSize ? 'el-checkbox--' + checkboxSize : '', | 8 | border && checkboxSize ? 'el-checkbox--' + checkboxSize : '', |
| ... | @@ -26,217 +31,217 @@ | ... | @@ -26,217 +31,217 @@ |
| 26 | </label> | 31 | </label> |
| 27 | </template> | 32 | </template> |
| 28 | <script> | 33 | <script> |
| 29 | import Emitter from 'element-ui/src/mixins/emitter'; | 34 | import Emitter from 'element-ui/src/mixins/emitter'; |
| 30 | 35 | ||
| 31 | export default { | 36 | export default { |
| 32 | name: 'ElCheckbox', | 37 | name: 'ElCheckbox', |
| 33 | 38 | ||
| 34 | mixins: [Emitter], | 39 | mixins: [Emitter], |
| 35 | 40 | ||
| 36 | inject: { | 41 | inject: { |
| 37 | elForm: { | 42 | elForm: { |
| 38 | default: '' | 43 | default: '' |
| 44 | }, | ||
| 45 | elFormItem: { | ||
| 46 | default: '' | ||
| 47 | } | ||
| 48 | }, | ||
| 49 | |||
| 50 | componentName: 'ElCheckbox', | ||
| 51 | |||
| 52 | data () { | ||
| 53 | return { | ||
| 54 | selfModel: false, | ||
| 55 | focus: false, | ||
| 56 | isLimitExceeded: false | ||
| 57 | }; | ||
| 39 | }, | 58 | }, |
| 40 | elFormItem: { | ||
| 41 | default: '' | ||
| 42 | } | ||
| 43 | }, | ||
| 44 | 59 | ||
| 45 | componentName: 'ElCheckbox', | 60 | computed: { |
| 61 | model: { | ||
| 62 | /** | ||
| 63 | * @description: get | ||
| 64 | * @author: renchao | ||
| 65 | */ | ||
| 66 | get () { | ||
| 67 | return this.isGroup | ||
| 68 | ? this.store : this.value !== undefined | ||
| 69 | ? this.value : this.selfModel; | ||
| 70 | }, | ||
| 71 | /** | ||
| 72 | * @description: set | ||
| 73 | * @param {*} val | ||
| 74 | * @author: renchao | ||
| 75 | */ | ||
| 76 | set (val) { | ||
| 77 | if (this.isGroup) { | ||
| 78 | this.isLimitExceeded = false; | ||
| 79 | (this._checkboxGroup.min !== undefined && | ||
| 80 | val.length < this._checkboxGroup.min && | ||
| 81 | (this.isLimitExceeded = true)); | ||
| 46 | 82 | ||
| 47 | data () { | 83 | (this._checkboxGroup.max !== undefined && |
| 48 | return { | 84 | val.length > this._checkboxGroup.max && |
| 49 | selfModel: false, | 85 | (this.isLimitExceeded = true)); |
| 50 | focus: false, | 86 | |
| 51 | isLimitExceeded: false | 87 | this.isLimitExceeded === false && |
| 52 | }; | 88 | this.dispatch('ElCheckboxGroup', 'input', [val]); |
| 53 | }, | 89 | } else { |
| 90 | this.$emit('input', val); | ||
| 91 | this.selfModel = val; | ||
| 92 | } | ||
| 93 | } | ||
| 94 | }, | ||
| 54 | 95 | ||
| 55 | computed: { | ||
| 56 | model: { | ||
| 57 | /** | 96 | /** |
| 58 | * @description: get | 97 | * @description: isChecked |
| 59 | * @author: renchao | 98 | * @author: renchao |
| 60 | */ | 99 | */ |
| 61 | get () { | 100 | isChecked () { |
| 62 | return this.isGroup | 101 | if ({}.toString.call(this.model) === '[object Boolean]') { |
| 63 | ? this.store : this.value !== undefined | 102 | return this.model; |
| 64 | ? this.value : this.selfModel; | 103 | } else if (Array.isArray(this.model)) { |
| 104 | return this.model.indexOf(this.label) > -1; | ||
| 105 | } else if (this.model !== null && this.model !== undefined) { | ||
| 106 | return this.model === this.trueLabel; | ||
| 107 | } | ||
| 65 | }, | 108 | }, |
| 66 | /** | 109 | /** |
| 67 | * @description: set | 110 | * @description: isGroup |
| 68 | * @param {*} val | ||
| 69 | * @author: renchao | 111 | * @author: renchao |
| 70 | */ | 112 | */ |
| 71 | set (val) { | 113 | isGroup () { |
| 72 | if (this.isGroup) { | 114 | let parent = this.$parent; |
| 73 | this.isLimitExceeded = false; | 115 | while (parent) { |
| 74 | (this._checkboxGroup.min !== undefined && | 116 | if (parent.$options.componentName !== 'ElCheckboxGroup') { |
| 75 | val.length < this._checkboxGroup.min && | 117 | parent = parent.$parent; |
| 76 | (this.isLimitExceeded = true)); | 118 | } else { |
| 77 | 119 | this._checkboxGroup = parent; | |
| 78 | (this._checkboxGroup.max !== undefined && | 120 | return true; |
| 79 | val.length > this._checkboxGroup.max && | 121 | } |
| 80 | (this.isLimitExceeded = true)); | ||
| 81 | |||
| 82 | this.isLimitExceeded === false && | ||
| 83 | this.dispatch('ElCheckboxGroup', 'input', [val]); | ||
| 84 | } else { | ||
| 85 | this.$emit('input', val); | ||
| 86 | this.selfModel = val; | ||
| 87 | } | 122 | } |
| 123 | return false; | ||
| 124 | }, | ||
| 125 | /** | ||
| 126 | * @description: store | ||
| 127 | * @author: renchao | ||
| 128 | */ | ||
| 129 | store () { | ||
| 130 | return this._checkboxGroup ? this._checkboxGroup.value : this.value; | ||
| 131 | }, | ||
| 132 | |||
| 133 | /** | ||
| 134 | * @description: isLimitDisabled | ||
| 135 | * @author: renchao | ||
| 136 | */ | ||
| 137 | isLimitDisabled () { | ||
| 138 | const { max, min } = this._checkboxGroup; | ||
| 139 | return !!(max || min) && | ||
| 140 | (this.model.length >= max && !this.isChecked) || | ||
| 141 | (this.model.length <= min && this.isChecked); | ||
| 142 | }, | ||
| 143 | /** | ||
| 144 | * @description: isDisabled | ||
| 145 | * @author: renchao | ||
| 146 | */ | ||
| 147 | isDisabled () { | ||
| 148 | return this.isGroup | ||
| 149 | ? this._checkboxGroup.disabled || this.disabled || (this.elForm || {}).disabled || this.isLimitDisabled | ||
| 150 | : this.disabled || (this.elForm || {}).disabled; | ||
| 151 | }, | ||
| 152 | /** | ||
| 153 | * @description: _elFormItemSize | ||
| 154 | * @author: renchao | ||
| 155 | */ | ||
| 156 | _elFormItemSize () { | ||
| 157 | return (this.elFormItem || {}).elFormItemSize; | ||
| 158 | }, | ||
| 159 | /** | ||
| 160 | * @description: checkboxSize | ||
| 161 | * @author: renchao | ||
| 162 | */ | ||
| 163 | checkboxSize () { | ||
| 164 | const temCheckboxSize = this.size || this._elFormItemSize || (this.$ELEMENT || {}).size; | ||
| 165 | return this.isGroup | ||
| 166 | ? this._checkboxGroup.checkboxGroupSize || temCheckboxSize | ||
| 167 | : temCheckboxSize; | ||
| 88 | } | 168 | } |
| 89 | }, | 169 | }, |
| 90 | 170 | ||
| 91 | /** | 171 | props: { |
| 92 | * @description: isChecked | 172 | value: {}, |
| 93 | * @author: renchao | 173 | label: {}, |
| 94 | */ | 174 | indeterminate: Boolean, |
| 95 | isChecked () { | 175 | disabled: Boolean, |
| 96 | if ({}.toString.call(this.model) === '[object Boolean]') { | 176 | checked: Boolean, |
| 97 | return this.model; | 177 | name: String, |
| 98 | } else if (Array.isArray(this.model)) { | 178 | trueLabel: [String, Number], |
| 99 | return this.model.indexOf(this.label) > -1; | 179 | falseLabel: [String, Number], |
| 100 | } else if (this.model !== null && this.model !== undefined) { | 180 | id: String, /* 当indeterminate为真时，为controls提供相关连的checkbox的id，表明元素间的控制关系*/ |
| 101 | return this.model === this.trueLabel; | 181 | controls: String, /* 当indeterminate为真时，为controls提供相关连的checkbox的id，表明元素间的控制关系*/ |
| 102 | } | 182 | border: Boolean, |
| 183 | size: String | ||
| 103 | }, | 184 | }, |
| 104 | /** | 185 | |
| 105 | * @description: isGroup | 186 | methods: { |
| 106 | * @author: renchao | 187 | /** |
| 107 | */ | 188 | * @description: addToStore |
| 108 | isGroup () { | 189 | * @author: renchao |
| 109 | let parent = this.$parent; | 190 | */ |
| 110 | while (parent) { | 191 | addToStore () { |
| 111 | if (parent.$options.componentName !== 'ElCheckboxGroup') { | 192 | if ( |
| 112 | parent = parent.$parent; | 193 | Array.isArray(this.model) && |
| 194 | this.model.indexOf(this.label) === -1 | ||
| 195 | ) { | ||
| 196 | this.model.push(this.label); | ||
| 113 | } else { | 197 | } else { |
| 114 | this._checkboxGroup = parent; | 198 | this.model = this.trueLabel || true; |
| 115 | return true; | ||
| 116 | } | 199 | } |
| 200 | }, | ||
| 201 | /** | ||
| 202 | * @description: handleChange | ||
| 203 | * @author: renchao | ||
| 204 | */ | ||
| 205 | handleChange (ev) { | ||
| 206 | if (this.isLimitExceeded) return; | ||
| 207 | let value; | ||
| 208 | if (ev.target.checked) { | ||
| 209 | value = this.trueLabel === undefined ? true : this.trueLabel; | ||
| 210 | } else { | ||
| 211 | value = this.falseLabel === undefined ? false : this.falseLabel; | ||
| 212 | } | ||
| 213 | this.$emit('change', value, ev); | ||
| 214 | this.$nextTick(() => { | ||
| 215 | if (this.isGroup) { | ||
| 216 | this.dispatch('ElCheckboxGroup', 'change', [this._checkboxGroup.value]); | ||
| 217 | } | ||
| 218 | }); | ||
| 117 | } | 219 | } |
| 118 | return false; | ||
| 119 | }, | ||
| 120 | /** | ||
| 121 | * @description: store | ||
| 122 | * @author: renchao | ||
| 123 | */ | ||
| 124 | store () { | ||
| 125 | return this._checkboxGroup ? this._checkboxGroup.value : this.value; | ||
| 126 | }, | ||
| 127 | |||
| 128 | /** | ||
| 129 | * @description: isLimitDisabled | ||
| 130 | * @author: renchao | ||
| 131 | */ | ||
| 132 | isLimitDisabled () { | ||
| 133 | const { max, min } = this._checkboxGroup; | ||
| 134 | return !!(max || min) && | ||
| 135 | (this.model.length >= max && !this.isChecked) || | ||
| 136 | (this.model.length <= min && this.isChecked); | ||
| 137 | }, | ||
| 138 | /** | ||
| 139 | * @description: isDisabled | ||
| 140 | * @author: renchao | ||
| 141 | */ | ||
| 142 | isDisabled () { | ||
| 143 | return this.isGroup | ||
| 144 | ? this._checkboxGroup.disabled || this.disabled || (this.elForm || {}).disabled || this.isLimitDisabled | ||
| 145 | : this.disabled || (this.elForm || {}).disabled; | ||
| 146 | }, | 220 | }, |
| 147 | /** | 221 | /** |
| 148 | * @description: _elFormItemSize | 222 | * @description: created |
| 149 | * @author: renchao | 223 | * @author: renchao |
| 150 | */ | 224 | */ |
| 151 | _elFormItemSize () { | 225 | created () { |
| 152 | return (this.elFormItem || {}).elFormItemSize; | 226 | this.checked && this.addToStore(); |
| 153 | }, | 227 | }, |
| 154 | /** | 228 | /** |
| 155 | * @description: checkboxSize | 229 | * @description: mounted |
| 156 | * @author: renchao | 230 | * @author: renchao |
| 157 | */ | 231 | */ |
| 158 | checkboxSize () { | 232 | mounted () { // 为indeterminate元素 添加aria-controls 属性 |
| 159 | const temCheckboxSize = this.size || this._elFormItemSize || (this.$ELEMENT || {}).size; | 233 | if (this.indeterminate) { |
| 160 | return this.isGroup | 234 | this.$el.setAttribute('aria-controls', this.controls); |
| 161 | ? this._checkboxGroup.checkboxGroupSize || temCheckboxSize | ||
| 162 | : temCheckboxSize; | ||
| 163 | } | ||
| 164 | }, | ||
| 165 | |||
| 166 | props: { | ||
| 167 | value: {}, | ||
| 168 | label: {}, | ||
| 169 | indeterminate: Boolean, | ||
| 170 | disabled: Boolean, | ||
| 171 | checked: Boolean, | ||
| 172 | name: String, | ||
| 173 | trueLabel: [String, Number], | ||
| 174 | falseLabel: [String, Number], | ||
| 175 | id: String, /* 当indeterminate为真时，为controls提供相关连的checkbox的id，表明元素间的控制关系*/ | ||
| 176 | controls: String, /* 当indeterminate为真时，为controls提供相关连的checkbox的id，表明元素间的控制关系*/ | ||
| 177 | border: Boolean, | ||
| 178 | size: String | ||
| 179 | }, | ||
| 180 | |||
| 181 | methods: { | ||
| 182 | /** | ||
| 183 | * @description: addToStore | ||
| 184 | * @author: renchao | ||
| 185 | */ | ||
| 186 | addToStore () { | ||
| 187 | if ( | ||
| 188 | Array.isArray(this.model) && | ||
| 189 | this.model.indexOf(this.label) === -1 | ||
| 190 | ) { | ||
| 191 | this.model.push(this.label); | ||
| 192 | } else { | ||
| 193 | this.model = this.trueLabel || true; | ||
| 194 | } | 235 | } |
| 195 | }, | 236 | }, |
| 196 | /** | 237 | /** |
| 197 | * @description: handleChange | 238 | * @description: watch |
| 198 | * @author: renchao | 239 | * @author: renchao |
| 199 | */ | 240 | */ |
| 200 | handleChange (ev) { | 241 | watch: { |
| 201 | if (this.isLimitExceeded) return; | 242 | value (value) { |
| 202 | let value; | 243 | this.dispatch('ElFormItem', 'el.form.change', value); |
| 203 | if (ev.target.checked) { | ||
| 204 | value = this.trueLabel === undefined ? true : this.trueLabel; | ||
| 205 | } else { | ||
| 206 | value = this.falseLabel === undefined ? false : this.falseLabel; | ||
| 207 | } | 244 | } |
| 208 | this.$emit('change', value, ev); | ||
| 209 | this.$nextTick(() => { | ||
| 210 | if (this.isGroup) { | ||
| 211 | this.dispatch('ElCheckboxGroup', 'change', [this._checkboxGroup.value]); | ||
| 212 | } | ||
| 213 | }); | ||
| 214 | } | ||
| 215 | }, | ||
| 216 | /** | ||
| 217 | * @description: created | ||
| 218 | * @author: renchao | ||
| 219 | */ | ||
| 220 | created () { | ||
| 221 | this.checked && this.addToStore(); | ||
| 222 | }, | ||
| 223 | /** | ||
| 224 | * @description: mounted | ||
| 225 | * @author: renchao | ||
| 226 | */ | ||
| 227 | mounted () { // 为indeterminate元素 添加aria-controls 属性 | ||
| 228 | if (this.indeterminate) { | ||
| 229 | this.$el.setAttribute('aria-controls', this.controls); | ||
| 230 | } | ||
| 231 | }, | ||
| 232 | /** | ||
| 233 | * @description: watch | ||
| 234 | * @author: renchao | ||
| 235 | */ | ||
| 236 | watch: { | ||
| 237 | value (value) { | ||
| 238 | this.dispatch('ElFormItem', 'el.form.change', value); | ||
| 239 | } | 245 | } |
| 240 | } | 246 | }; |
| 241 | }; | ||
| 242 | </script> | 247 | </script> | ... | ... |
| 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> | ... | ... |
| ... | @@ -6,44 +6,123 @@ | ... | @@ -6,44 +6,123 @@ |
| 6 | <template> | 6 | <template> |
| 7 | <div> | 7 | <div> |
| 8 | <div class="process-viewer"> | 8 | <div class="process-viewer"> |
| 9 | <div v-show="!isLoading" ref="processCanvas" class="process-canvas" style="height: 280px;" /> | 9 | <div |
| 10 | v-show="!isLoading" | ||
| 11 | ref="processCanvas" | ||
| 12 | class="process-canvas" | ||
| 13 | style="height: 280px" | ||
| 14 | /> | ||
| 10 | <!-- 自定义箭头样式，用于成功状态下流程连线箭头 --> | 15 | <!-- 自定义箭头样式，用于成功状态下流程连线箭头 --> |
| 11 | <defs ref="customSuccessDefs"> | 16 | <defs ref="customSuccessDefs"> |
| 12 | <marker id="sequenceflow-end-white-success" view-box="0 0 20 20" ref-x="11" ref-y="10" marker-width="10" | 17 | <marker |
| 13 | marker-height="10" orient="auto"> | 18 | id="sequenceflow-end-white-success" |
| 14 | <path class="success-arrow" d="M 1 5 L 11 10 L 1 15 Z" | 19 | view-box="0 0 20 20" |
| 15 | style="stroke-width: 1px; stroke-linecap: round; stroke-dasharray: 10000, 1;" /> | 20 | ref-x="11" |
| 21 | ref-y="10" | ||
| 22 | marker-width="10" | ||
| 23 | marker-height="10" | ||
| 24 | orient="auto" | ||
| 25 | > | ||
| 26 | <path | ||
| 27 | class="success-arrow" | ||
| 28 | d="M 1 5 L 11 10 L 1 15 Z" | ||
| 29 | style=" | ||
| 30 | stroke-width: 1px; | ||
| 31 | stroke-linecap: round; | ||
| 32 | stroke-dasharray: 10000, 1; | ||
| 33 | " | ||
| 34 | /> | ||
| 16 | </marker> | 35 | </marker> |
| 17 | <marker id="conditional-flow-marker-white-success" view-box="0 0 20 20" ref-x="-1" ref-y="10" marker-width="10" | 36 | <marker |
| 18 | marker-height="10" orient="auto"> | 37 | id="conditional-flow-marker-white-success" |
| 19 | <path class="success-conditional" d="M 0 10 L 8 6 L 16 10 L 8 14 Z" | 38 | view-box="0 0 20 20" |
| 20 | style="stroke-width: 1px; stroke-linecap: round; stroke-dasharray: 10000, 1;" /> | 39 | ref-x="-1" |
| 40 | ref-y="10" | ||
| 41 | marker-width="10" | ||
| 42 | marker-height="10" | ||
| 43 | orient="auto" | ||
| 44 | > | ||
| 45 | <path | ||
| 46 | class="success-conditional" | ||
| 47 | d="M 0 10 L 8 6 L 16 10 L 8 14 Z" | ||
| 48 | style=" | ||
| 49 | stroke-width: 1px; | ||
| 50 | stroke-linecap: round; | ||
| 51 | stroke-dasharray: 10000, 1; | ||
| 52 | " | ||
| 53 | /> | ||
| 21 | </marker> | 54 | </marker> |
| 22 | </defs> | 55 | </defs> |
| 23 | <!-- 自定义箭头样式，用于失败状态下流程连线箭头 --> | 56 | <!-- 自定义箭头样式，用于失败状态下流程连线箭头 --> |
| 24 | <defs ref="customFailDefs"> | 57 | <defs ref="customFailDefs"> |
| 25 | <marker id="sequenceflow-end-white-fail" view-box="0 0 20 20" ref-x="11" ref-y="10" marker-width="10" | 58 | <marker |
| 26 | marker-height="10" orient="auto"> | 59 | id="sequenceflow-end-white-fail" |
| 27 | <path class="fail-arrow" d="M 1 5 L 11 10 L 1 15 Z" | 60 | view-box="0 0 20 20" |
| 28 | style="stroke-width: 1px; stroke-linecap: round; stroke-dasharray: 10000, 1;" /> | 61 | ref-x="11" |
| 62 | ref-y="10" | ||
| 63 | marker-width="10" | ||
| 64 | marker-height="10" | ||
| 65 | orient="auto" | ||
| 66 | > | ||
| 67 | <path | ||
| 68 | class="fail-arrow" | ||
| 69 | d="M 1 5 L 11 10 L 1 15 Z" | ||
| 70 | style=" | ||
| 71 | stroke-width: 1px; | ||
| 72 | stroke-linecap: round; | ||
| 73 | stroke-dasharray: 10000, 1; | ||
| 74 | " | ||
| 75 | /> | ||
| 29 | </marker> | 76 | </marker> |
| 30 | <marker id="conditional-flow-marker-white-fail" view-box="0 0 20 20" ref-x="-1" ref-y="10" marker-width="10" | 77 | <marker |
| 31 | marker-height="10" orient="auto"> | 78 | id="conditional-flow-marker-white-fail" |
| 32 | <path class="fail-conditional" d="M 0 10 L 8 6 L 16 10 L 8 14 Z" | 79 | view-box="0 0 20 20" |
| 33 | style="stroke-width: 1px; stroke-linecap: round; stroke-dasharray: 10000, 1;" /> | 80 | ref-x="-1" |
| 81 | ref-y="10" | ||
| 82 | marker-width="10" | ||
| 83 | marker-height="10" | ||
| 84 | orient="auto" | ||
| 85 | > | ||
| 86 | <path | ||
| 87 | class="fail-conditional" | ||
| 88 | d="M 0 10 L 8 6 L 16 10 L 8 14 Z" | ||
| 89 | style=" | ||
| 90 | stroke-width: 1px; | ||
| 91 | stroke-linecap: round; | ||
| 92 | stroke-dasharray: 10000, 1; | ||
| 93 | " | ||
| 94 | /> | ||
| 34 | </marker> | 95 | </marker> |
| 35 | </defs> | 96 | </defs> |
| 36 | 97 | ||
| 37 | <div style="position: absolute; top: 0px; left: 0px; width: 100%;"> | 98 | <div style="position: absolute; top: 0px; left: 0px; width: 100%"> |
| 38 | <el-row type="flex" justify="end"> | 99 | <el-row type="flex" justify="end"> |
| 39 | <el-button-group key="scale-control" size="medium"> | 100 | <el-button-group key="scale-control" size="medium"> |
| 40 | <el-button size="medium" type="default" :plain="true" :disabled="defaultZoom <= 0.3" icon="el-icon-zoom-out" | 101 | <el-button |
| 41 | @click="processZoomOut()" /> | 102 | size="medium" |
| 42 | <el-button size="medium" type="default" style="width: 90px;">{{ Math.floor(this.defaultZoom * 10 * 10) + "%" | 103 | type="default" |
| 104 | :plain="true" | ||
| 105 | :disabled="defaultZoom <= 0.3" | ||
| 106 | icon="el-icon-zoom-out" | ||
| 107 | @click="processZoomOut()" | ||
| 108 | /> | ||
| 109 | <el-button size="medium" type="default" style="width: 90px">{{ | ||
| 110 | Math.floor(this.defaultZoom * 10 * 10) + "%" | ||
| 43 | }}</el-button> | 111 | }}</el-button> |
| 44 | <el-button size="medium" type="default" :plain="true" :disabled="defaultZoom >= 3.9" icon="el-icon-zoom-in" | 112 | <el-button |
| 45 | @click="processZoomIn()" /> | 113 | size="medium" |
| 46 | <el-button size="medium" type="default" icon="el-icon-c-scale-to-original" @click="processReZoom()" /> | 114 | type="default" |
| 115 | :plain="true" | ||
| 116 | :disabled="defaultZoom >= 3.9" | ||
| 117 | icon="el-icon-zoom-in" | ||
| 118 | @click="processZoomIn()" | ||
| 119 | /> | ||
| 120 | <el-button | ||
| 121 | size="medium" | ||
| 122 | type="default" | ||
| 123 | icon="el-icon-c-scale-to-original" | ||
| 124 | @click="processReZoom()" | ||
| 125 | /> | ||
| 47 | <slot /> | 126 | <slot /> |
| 48 | </el-button-group> | 127 | </el-button-group> |
| 49 | </el-row> | 128 | </el-row> |
| ... | @@ -52,285 +131,396 @@ | ... | @@ -52,285 +131,396 @@ |
| 52 | <!-- 已完成节点悬浮弹窗 --> | 131 | <!-- 已完成节点悬浮弹窗 --> |
| 53 | <div class="information-list"> | 132 | <div class="information-list"> |
| 54 | <el-select v-model="selectValue" @change="handleSelect"> | 133 | <el-select v-model="selectValue" @change="handleSelect"> |
| 55 | <el-option v-for="item in selectOptions" :key="item.value" :label="item.label" :value="item.value"> | 134 | <el-option |
| 135 | v-for="item in selectOptions" | ||
| 136 | :key="item.value" | ||
| 137 | :label="item.label" | ||
| 138 | :value="item.value" | ||
| 139 | > | ||
| 56 | </el-option> | 140 | </el-option> |
| 57 | </el-select> | 141 | </el-select> |
| 58 | <el-table height="190" :data="taskCommentList" size="mini" border header-cell-class-name="table-header-gray"> | 142 | <el-table |
| 59 | <el-table-column label="序号" header-align="center" align="center" type="index" width="55px" /> | 143 | height="190" |
| 144 | :data="taskCommentList" | ||
| 145 | size="mini" | ||
| 146 | border | ||
| 147 | header-cell-class-name="table-header-gray" | ||
| 148 | > | ||
| 149 | <el-table-column | ||
| 150 | label="序号" | ||
| 151 | header-align="center" | ||
| 152 | align="center" | ||
| 153 | type="index" | ||
| 154 | width="55px" | ||
| 155 | /> | ||
| 60 | <el-table-column label="流程状态" header-align="center" align="center"> | 156 | <el-table-column label="流程状态" header-align="center" align="center"> |
| 61 | <template slot-scope="scope"> | 157 | <template slot-scope="scope"> |
| 62 | <div v-if="scope.row.endTime">已完结</div> | 158 | <div v-if="scope.row.endTime">已完结</div> |
| 63 | <div v-else>正在办理</div> | 159 | <div v-else>正在办理</div> |
| 64 | </template> | 160 | </template> |
| 65 | </el-table-column> | 161 | </el-table-column> |
| 66 | <el-table-column label="环节名称" prop="name" minWidth="100" align="center" /> | 162 | <el-table-column |
| 67 | <el-table-column label="办理人" prop="agent" minWidth="120" align="center" /> | 163 | label="环节名称" |
| 68 | <el-table-column label="转入时间" prop="createTime" :formatter="formatDate" width="160" align="center" /> | 164 | prop="name" |
| 69 | <el-table-column label="认领时间" prop="claimTime" :formatter="formatDate" width="160" align="center" /> | 165 | minWidth="100" |
| 70 | <el-table-column label="转出时间" prop="endTime" :formatter="formatDate" width="160" align="center" /> | 166 | align="center" |
| 71 | <el-table-column label="操作方式" prop="controls" align="center"/> | 167 | /> |
| 72 | <el-table-column label="意见" prop="idea" align="center"/> | 168 | <el-table-column |
| 169 | label="办理人" | ||
| 170 | prop="agent" | ||
| 171 | minWidth="120" | ||
| 172 | align="center" | ||
| 173 | /> | ||
| 174 | <el-table-column | ||
| 175 | label="转入时间" | ||
| 176 | prop="createTime" | ||
| 177 | :formatter="formatDate" | ||
| 178 | width="160" | ||
| 179 | align="center" | ||
| 180 | /> | ||
| 181 | <el-table-column | ||
| 182 | label="认领时间" | ||
| 183 | prop="claimTime" | ||
| 184 | :formatter="formatDate" | ||
| 185 | width="160" | ||
| 186 | align="center" | ||
| 187 | /> | ||
| 188 | <el-table-column | ||
| 189 | label="转出时间" | ||
| 190 | prop="endTime" | ||
| 191 | :formatter="formatDate" | ||
| 192 | width="160" | ||
| 193 | align="center" | ||
| 194 | /> | ||
| 195 | <el-table-column label="操作方式" prop="controls" align="center" /> | ||
| 196 | <el-table-column label="意见" prop="idea" align="center" /> | ||
| 73 | </el-table> | 197 | </el-table> |
| 74 | </div> | 198 | </div> |
| 75 | </div> | 199 | </div> |
| 76 | </template> | 200 | </template> |
| 77 | <script> | 201 | <script> |
| 78 | import '@/styles/package/theme/index.scss' | 202 | import "@/styles/package/theme/index.scss"; |
| 79 | import BpmnViewer from 'bpmn-js/lib/Viewer' | 203 | import BpmnViewer from "bpmn-js/lib/Viewer"; |
| 80 | import MoveCanvasModule from 'diagram-js/lib/navigation/movecanvas' | 204 | import MoveCanvasModule from "diagram-js/lib/navigation/movecanvas"; |
| 81 | export default { | 205 | export default { |
| 82 | props: { | 206 | props: { |
| 83 | formData: { | 207 | formData: { |
| 84 | type: Object, | 208 | type: Object, |
| 85 | default: {} | 209 | default: {}, |
| 210 | }, | ||
| 211 | }, | ||
| 212 | data() { | ||
| 213 | return { | ||
| 214 | dlgTitle: undefined, | ||
| 215 | defaultZoom: 1, | ||
| 216 | // 是否正在加载流程图 | ||
| 217 | isLoading: true, | ||
| 218 | bpmnViewer: undefined, | ||
| 219 | // 已完成流程元素 | ||
| 220 | processNodeInfo: undefined, | ||
| 221 | // 当前任务id | ||
| 222 | selectTaskId: undefined, | ||
| 223 | // 任务节点审批记录 | ||
| 224 | taskList: [], | ||
| 225 | taskCommentList: [], | ||
| 226 | // 已完成任务悬浮延迟Timer | ||
| 227 | hoverTimer: null, | ||
| 228 | // 下拉 | ||
| 229 | selectValue: "", | ||
| 230 | selectOptions: [], | ||
| 231 | }; | ||
| 232 | }, | ||
| 233 | created() { | ||
| 234 | this.$nextTick(() => { | ||
| 235 | // 获取流程记录 | ||
| 236 | this.getCommentList(); | ||
| 237 | this.setProcessStatus(this.formData.finishedInfo); | ||
| 238 | this.importXML(this.formData.xml); | ||
| 239 | }); | ||
| 240 | }, | ||
| 241 | destroyed() { | ||
| 242 | this.clearViewer(); | ||
| 243 | }, | ||
| 244 | methods: { | ||
| 245 | formatDate(row, column) { | ||
| 246 | let data = row[column.property]; | ||
| 247 | if (data == null) { | ||
| 248 | return null; | ||
| 86 | } | 249 | } |
| 250 | let dt = new Date(data); | ||
| 251 | return ( | ||
| 252 | dt.getFullYear() + | ||
| 253 | "-" + | ||
| 254 | (dt.getMonth() + 1) + | ||
| 255 | "-" + | ||
| 256 | dt.getDate() + | ||
| 257 | " " + | ||
| 258 | dt.getHours() + | ||
| 259 | ":" + | ||
| 260 | dt.getMinutes() + | ||
| 261 | ":" + | ||
| 262 | dt.getSeconds() | ||
| 263 | ); | ||
| 264 | }, | ||
| 265 | processReZoom() { | ||
| 266 | this.defaultZoom = 1; | ||
| 267 | this.bpmnViewer.get("canvas").zoom("fit-viewport", "auto"); | ||
| 87 | }, | 268 | }, |
| 88 | data () { | 269 | processZoomIn(zoomStep = 0.1) { |
| 89 | return { | 270 | const newZoom = Math.floor(this.defaultZoom * 100 + zoomStep * 100) / 100; |
| 90 | dlgTitle: undefined, | 271 | if (newZoom > 4) { |
| 91 | defaultZoom: 1, | 272 | throw new Error( |
| 92 | // 是否正在加载流程图 | 273 | "[Process Designer Warn ]: The zoom ratio cannot be greater than 4" |
| 93 | isLoading: true, | 274 | ); |
| 94 | bpmnViewer: undefined, | ||
| 95 | // 已完成流程元素 | ||
| 96 | processNodeInfo: undefined, | ||
| 97 | // 当前任务id | ||
| 98 | selectTaskId: undefined, | ||
| 99 | // 任务节点审批记录 | ||
| 100 | taskList:[], | ||
| 101 | taskCommentList: [], | ||
| 102 | // 已完成任务悬浮延迟Timer | ||
| 103 | hoverTimer: null, | ||
| 104 | // 下拉 | ||
| 105 | selectValue: '', | ||
| 106 | selectOptions: [] | ||
| 107 | } | 275 | } |
| 276 | this.defaultZoom = newZoom; | ||
| 277 | this.bpmnViewer.get("canvas").zoom(this.defaultZoom); | ||
| 108 | }, | 278 | }, |
| 109 | created () { | 279 | processZoomOut(zoomStep = 0.1) { |
| 110 | this.$nextTick(() => { | 280 | const newZoom = Math.floor(this.defaultZoom * 100 - zoomStep * 100) / 100; |
| 111 | // 获取流程记录 | 281 | if (newZoom < 0.2) { |
| 112 | this.getCommentList() | 282 | throw new Error( |
| 113 | this.setProcessStatus(this.formData.finishedInfo); | 283 | "[Process Designer Warn ]: The zoom ratio cannot be scss than 0.2" |
| 114 | this.importXML(this.formData.xml) | 284 | ); |
| 115 | 285 | } | |
| 116 | }) | 286 | this.defaultZoom = newZoom; |
| 287 | this.bpmnViewer.get("canvas").zoom(this.defaultZoom); | ||
| 117 | }, | 288 | }, |
| 118 | destroyed () { | 289 | getOperationTagType(type) { |
| 119 | this.clearViewer() | 290 | return "success"; |
| 120 | }, | 291 | }, |
| 121 | methods: { | 292 | // 流程图预览清空 |
| 122 | formatDate(row, column) { | 293 | clearViewer(a) { |
| 123 | let data = row[column.property] | 294 | if (this.$refs.processCanvas) { |
| 124 | if(data == null) { | 295 | this.$refs.processCanvas.innerHTML = ""; |
| 125 | return null | 296 | } |
| 126 | } | 297 | if (this.bpmnViewer) { |
| 127 | let dt = new Date(data) | 298 | this.bpmnViewer.destroy(); |
| 128 | return dt.getFullYear() + '-' + (dt.getMonth() + 1) + '-' + dt.getDate() + ' ' + dt.getHours() + ':' + dt.getMinutes() + ':' + dt.getSeconds() | 299 | } |
| 129 | }, | 300 | this.bpmnViewer = null; |
| 130 | processReZoom () { | 301 | }, |
| 131 | this.defaultZoom = 1 | 302 | // 添加自定义箭头 |
| 132 | this.bpmnViewer.get('canvas').zoom('fit-viewport', 'auto') | 303 | addCustomDefs() { |
| 133 | }, | 304 | const canvas = this.bpmnViewer.get("canvas"); |
| 134 | processZoomIn (zoomStep = 0.1) { | 305 | const svg = canvas._svg; |
| 135 | const newZoom = Math.floor(this.defaultZoom * 100 + zoomStep * 100) / 100 | 306 | const customSuccessDefs = this.$refs.customSuccessDefs; |
| 136 | if (newZoom > 4) { | 307 | const customFailDefs = this.$refs.customFailDefs; |
| 137 | throw new Error('[Process Designer Warn ]: The zoom ratio cannot be greater than 4') | 308 | svg.appendChild(customSuccessDefs); |
| 138 | } | 309 | svg.appendChild(customFailDefs); |
| 139 | this.defaultZoom = newZoom | 310 | }, |
| 140 | this.bpmnViewer.get('canvas').zoom(this.defaultZoom) | 311 | // 任务悬浮弹窗 |
| 141 | }, | 312 | onSelectElement(element) { |
| 142 | processZoomOut (zoomStep = 0.1) { | 313 | this.selectTaskId = undefined; |
| 143 | const newZoom = Math.floor(this.defaultZoom * 100 - zoomStep * 100) / 100 | 314 | this.dlgTitle = undefined; |
| 144 | if (newZoom < 0.2) { | 315 | let allfinishedTaskSet = [ |
| 145 | throw new Error('[Process Designer Warn ]: The zoom ratio cannot be scss than 0.2') | 316 | ...this.processNodeInfo.finishedTaskSet, |
| 146 | } | 317 | ...this.processNodeInfo.unfinishedTaskSet, |
| 147 | this.defaultZoom = newZoom | 318 | ]; |
| 148 | this.bpmnViewer.get('canvas').zoom(this.defaultZoom) | 319 | if (this.processNodeInfo == null || allfinishedTaskSet == null) return; |
| 149 | }, | 320 | if (element == null || allfinishedTaskSet.indexOf(element.id) === -1) { |
| 150 | getOperationTagType (type) { | 321 | return; |
| 151 | return 'success' | 322 | } |
| 152 | }, | 323 | this.selectTaskId = element.id; |
| 153 | // 流程图预览清空 | 324 | this.selectValue = element.id; |
| 154 | clearViewer (a) { | 325 | this.dlgTitle = element.businessObject |
| 155 | if (this.$refs.processCanvas) { | 326 | ? element.businessObject.name |
| 156 | this.$refs.processCanvas.innerHTML = '' | 327 | : undefined; |
| 157 | } | 328 | // 计算当前悬浮任务审批记录，如果记录为空不显示弹窗 |
| 158 | if (this.bpmnViewer) { | 329 | this.taskCommentList = (this.taskList || []).filter((item) => { |
| 159 | this.bpmnViewer.destroy() | 330 | return item.taskDefinitionKey === this.selectTaskId; |
| 160 | } | 331 | }); |
| 161 | this.bpmnViewer = null | 332 | if (this.taskCommentList.length == 0) { |
| 162 | }, | 333 | this.taskCommentList = this.taskList; |
| 163 | // 添加自定义箭头 | 334 | } |
| 164 | addCustomDefs () { | 335 | }, |
| 165 | const canvas = this.bpmnViewer.get('canvas') | 336 | // 下拉列表切换 |
| 166 | const svg = canvas._svg | 337 | handleSelect(val) { |
| 167 | const customSuccessDefs = this.$refs.customSuccessDefs | 338 | this.taskCommentList = (this.taskList || []).filter((item) => { |
| 168 | const customFailDefs = this.$refs.customFailDefs | 339 | return item.taskDefinitionKey === val; |
| 169 | svg.appendChild(customSuccessDefs) | 340 | }); |
| 170 | svg.appendChild(customFailDefs) | 341 | if (this.taskCommentList.length == 0) { |
| 171 | }, | 342 | this.taskCommentList = this.taskList; |
| 172 | // 任务悬浮弹窗 | 343 | } |
| 173 | onSelectElement (element) { | 344 | }, |
| 174 | this.selectTaskId = undefined | 345 | // 显示流程图 |
| 175 | this.dlgTitle = undefined | 346 | async importXML(xml) { |
| 176 | let allfinishedTaskSet = [...this.processNodeInfo.finishedTaskSet, ...this.processNodeInfo.unfinishedTaskSet] | 347 | let xmlData = this.$x2js.xml2js(xml).definitions.process; |
| 177 | if (this.processNodeInfo == null || allfinishedTaskSet == null) | 348 | this.selectOptions = xmlData.userTask.map((item) => { |
| 178 | return | 349 | return { value: item._id, label: item._name }; |
| 179 | if (element == null || allfinishedTaskSet.indexOf(element.id) === -1) { | 350 | }); |
| 180 | return | 351 | this.selectOptions = [ |
| 181 | } | 352 | { value: xmlData.startEvent._id, label: "浏览记录" }, |
| 182 | this.selectTaskId = element.id | 353 | ...this.selectOptions, |
| 183 | this.selectValue = element.id | 354 | ]; |
| 184 | this.dlgTitle = element.businessObject ? element.businessObject.name : undefined | 355 | this.selectOptions = this.selectOptions |
| 185 | // 计算当前悬浮任务审批记录，如果记录为空不显示弹窗 | 356 | .map((item) => { |
| 186 | this.taskCommentList = (this.taskList || []).filter(item => { | ||
| 187 | return item.taskDefinitionKey === this.selectTaskId | ||
| 188 | }) | ||
| 189 | if (this.taskCommentList.length==0) { | ||
| 190 | this.taskCommentList = this.taskList; | ||
| 191 | } | ||
| 192 | }, | ||
| 193 | // 下拉列表切换 | ||
| 194 | handleSelect (val) { | ||
| 195 | this.taskCommentList = (this.taskList || []).filter(item => { | ||
| 196 | return item.taskDefinitionKey === val | ||
| 197 | }) | ||
| 198 | if (this.taskCommentList.length==0) { | ||
| 199 | this.taskCommentList = this.taskList; | ||
| 200 | } | ||
| 201 | }, | ||
| 202 | // 显示流程图 | ||
| 203 | async importXML (xml) { | ||
| 204 | let xmlData = this.$x2js.xml2js(xml).definitions.process; | ||
| 205 | this.selectOptions = xmlData.userTask.map(item => { | ||
| 206 | return { value: item._id, label: item._name } | ||
| 207 | }) | ||
| 208 | this.selectOptions = [{ value: xmlData.startEvent._id, label: '浏览记录' }, ...this.selectOptions] | ||
| 209 | this.selectOptions = this.selectOptions.map(item => { | ||
| 210 | if (this.formData.finishedInfo.finishedTaskSet.includes(item.value)) { | 357 | if (this.formData.finishedInfo.finishedTaskSet.includes(item.value)) { |
| 211 | return item | 358 | return item; |
| 212 | } | 359 | } |
| 213 | if (this.formData.finishedInfo.unfinishedTaskSet.includes(item.value)) { | 360 | if ( |
| 214 | return item | 361 | this.formData.finishedInfo.unfinishedTaskSet.includes(item.value) |
| 362 | ) { | ||
| 363 | return item; | ||
| 215 | } | 364 | } |
| 216 | }).filter(Boolean); | ||
| 217 | this.selectValue = xmlData.startEvent._id | ||
| 218 | this.clearViewer('a') | ||
| 219 | if (xml != null && xml !== '') { | ||
| 220 | try { | ||
| 221 | this.bpmnViewer = new BpmnViewer({ | ||
| 222 | additionalModules: [ | ||
| 223 | // 移动整个画布 | ||
| 224 | MoveCanvasModule | ||
| 225 | ], | ||
| 226 | container: this.$refs.processCanvas | ||
| 227 | }) | ||
| 228 | // 任务节点悬浮事件 | ||
| 229 | this.bpmnViewer.on('element.click', ({ element }) => { | ||
| 230 | this.onSelectElement(element) | ||
| 231 | }) | ||
| 232 | await this.bpmnViewer.importXML(xml) | ||
| 233 | this.isLoading = true | ||
| 234 | this.addCustomDefs() | ||
| 235 | } catch (e) { | ||
| 236 | this.clearViewer('b') | ||
| 237 | } finally { | ||
| 238 | this.isLoading = false | ||
| 239 | this.setProcessStatus(this.processNodeInfo) | ||
| 240 | this.$nextTick(() => { | ||
| 241 | this.processReZoom() | ||
| 242 | }) | ||
| 243 | } | ||
| 244 | } | ||
| 245 | }, | ||
| 246 | // 获取流程记录 | ||
| 247 | getCommentList() { | ||
| 248 | this.formData.allCommentList.forEach(async (item,index) => { | ||
| 249 | item.comments.forEach(element => { | ||
| 250 | if(element.type=="COMPLETE"){ | ||
| 251 | this.formData.allCommentList[index].idea=element.message | ||
| 252 | this.formData.allCommentList[index].controls="完成" | ||
| 253 | } | ||
| 254 | }); | ||
| 255 | this.formData.allCommentList[index].agent=item.assignee.name | ||
| 256 | }) | ||
| 257 | this.formData.handlinglist.forEach(async (item,index) => { | ||
| 258 | if(item.assignee.name){ | ||
| 259 | this.formData.handlinglist[index].agent=item.assignee.name | ||
| 260 | }else{ | ||
| 261 | let str="" | ||
| 262 | item.countersign.forEach((item) => { | ||
| 263 | str+=item.name+"," | ||
| 264 | }) | ||
| 265 | str=str.slice(0, -1); | ||
| 266 | this.formData.allCommentList[index].agent=str | ||
| 267 | } | ||
| 268 | |||
| 269 | }) | 365 | }) |
| 270 | this.taskList =[...this.formData.allCommentList,...this.formData.handlinglist]; | 366 | .filter(Boolean); |
| 271 | // this.taskList =this.formData.allCommentList; | 367 | this.selectValue = xmlData.startEvent._id; |
| 272 | // 处理数据之后赋值 | 368 | this.clearViewer("a"); |
| 273 | this.taskCommentList=this.taskList | 369 | if (xml != null && xml !== "") { |
| 274 | 370 | try { | |
| 275 | }, | 371 | this.bpmnViewer = new BpmnViewer({ |
| 276 | 372 | additionalModules: [ | |
| 277 | // 设置流程图元素状态 | 373 | // 移动整个画布 |
| 278 | setProcessStatus (processNodeInfo) { | 374 | MoveCanvasModule, |
| 279 | this.processNodeInfo = processNodeInfo | 375 | ], |
| 280 | if (this.isLoading || this.processNodeInfo == null || this.bpmnViewer == null) return | 376 | container: this.$refs.processCanvas, |
| 281 | const { finishedTaskSet, rejectedTaskSet, unfinishedTaskSet, finishedSequenceFlowSet } = this.processNodeInfo | 377 | }); |
| 282 | const canvas = this.bpmnViewer.get('canvas') | 378 | // 任务节点悬浮事件 |
| 283 | const elementRegistry = this.bpmnViewer.get('elementRegistry') | 379 | this.bpmnViewer.on("element.click", ({ element }) => { |
| 284 | if (Array.isArray(finishedSequenceFlowSet)) { | 380 | this.onSelectElement(element); |
| 285 | finishedSequenceFlowSet.forEach(item => { | 381 | }); |
| 286 | if (item != null) { | 382 | await this.bpmnViewer.importXML(xml); |
| 287 | canvas.addMarker(item, 'success') | 383 | this.isLoading = true; |
| 288 | const element = elementRegistry.get(item) | 384 | this.addCustomDefs(); |
| 289 | const conditionExpression = element.businessObject.conditionExpression | 385 | } catch (e) { |
| 290 | if (conditionExpression) { | 386 | this.clearViewer("b"); |
| 291 | canvas.addMarker(item, 'condition-expression') | 387 | } finally { |
| 292 | } | 388 | this.isLoading = false; |
| 293 | } | 389 | this.setProcessStatus(this.processNodeInfo); |
| 294 | }) | 390 | this.$nextTick(() => { |
| 295 | } | 391 | this.processReZoom(); |
| 296 | if (Array.isArray(finishedTaskSet)) { | 392 | }); |
| 297 | finishedTaskSet.forEach(item => canvas.addMarker(item, 'success')) | ||
| 298 | } | 393 | } |
| 299 | if (Array.isArray(unfinishedTaskSet)) { | 394 | } |
| 300 | unfinishedTaskSet.forEach(item => canvas.addMarker(item, 'primary')) | 395 | }, |
| 396 | // 获取流程记录 | ||
| 397 | getCommentList() { | ||
| 398 | this.formData.allCommentList.forEach(async (item, index) => { | ||
| 399 | // item.comments.forEach(element => { | ||
| 400 | // if(element.type=="COMPLETE"){ | ||
| 401 | // this.formData.allCommentList[index].idea=element.message | ||
| 402 | // this.formData.allCommentList[index].controls="完成" | ||
| 403 | // } | ||
| 404 | // }); | ||
| 405 | let type = item.comments[item.comments.length - 1].type; | ||
| 406 | this.formData.allCommentList[index].idea = | ||
| 407 | item.comments[item.comments.length - 1].message; | ||
| 408 | // 操作方式 | ||
| 409 | let controls = ""; | ||
| 410 | switch (type) { | ||
| 411 | case "COMPLETE": | ||
| 412 | controls = "完成"; | ||
| 413 | break; | ||
| 414 | case "CLAIM": | ||
| 415 | controls = "完成"; | ||
| 416 | break; | ||
| 417 | case "ASSIGN": | ||
| 418 | controls = "转办"; | ||
| 419 | break; | ||
| 420 | case "DELEGATE": | ||
| 421 | controls = "委派"; | ||
| 422 | break; | ||
| 423 | case "UNCLAIM": | ||
| 424 | controls = "取消认领"; | ||
| 425 | break; | ||
| 426 | case "STOP": | ||
| 427 | controls = "终止"; | ||
| 428 | break; | ||
| 429 | case "BACK": | ||
| 430 | controls = "退回"; | ||
| 431 | break; | ||
| 301 | } | 432 | } |
| 302 | if (Array.isArray(rejectedTaskSet)) { | 433 | this.formData.allCommentList[index].controls = controls; |
| 303 | rejectedTaskSet.forEach(item => { | 434 | this.formData.allCommentList[index].agent = item.assignee.name; |
| 304 | if (item != null) { | 435 | }); |
| 305 | const element = elementRegistry.get(item) | 436 | this.formData.handlinglist.forEach(async (item, index) => { |
| 306 | if (element.type.includes('Task')) { | 437 | if (item.assignee.name) { |
| 307 | canvas.addMarker(item, 'danger') | 438 | this.formData.handlinglist[index].agent = item.assignee.name; |
| 308 | } else { | 439 | } else { |
| 309 | canvas.addMarker(item, 'warning') | 440 | let str = ""; |
| 310 | } | 441 | item.countersign.forEach((item) => { |
| 311 | } | 442 | str += item.name + ","; |
| 312 | }) | 443 | }); |
| 444 | str = str.slice(0, -1); | ||
| 445 | this.formData.allCommentList[index].agent = str; | ||
| 313 | } | 446 | } |
| 447 | }); | ||
| 448 | this.taskList = [ | ||
| 449 | ...this.formData.allCommentList, | ||
| 450 | ...this.formData.handlinglist, | ||
| 451 | ]; | ||
| 452 | // this.taskList =this.formData.allCommentList; | ||
| 453 | // 处理数据之后赋值 | ||
| 454 | this.taskCommentList = this.taskList; | ||
| 455 | }, | ||
| 314 | 456 | ||
| 457 | // 设置流程图元素状态 | ||
| 458 | setProcessStatus(processNodeInfo) { | ||
| 459 | this.processNodeInfo = processNodeInfo; | ||
| 460 | if ( | ||
| 461 | this.isLoading || | ||
| 462 | this.processNodeInfo == null || | ||
| 463 | this.bpmnViewer == null | ||
| 464 | ) | ||
| 465 | return; | ||
| 466 | const { | ||
| 467 | finishedTaskSet, | ||
| 468 | rejectedTaskSet, | ||
| 469 | unfinishedTaskSet, | ||
| 470 | finishedSequenceFlowSet, | ||
| 471 | } = this.processNodeInfo; | ||
| 472 | const canvas = this.bpmnViewer.get("canvas"); | ||
| 473 | const elementRegistry = this.bpmnViewer.get("elementRegistry"); | ||
| 474 | if (Array.isArray(finishedSequenceFlowSet)) { | ||
| 475 | finishedSequenceFlowSet.forEach((item) => { | ||
| 476 | if (item != null) { | ||
| 477 | canvas.addMarker(item, "success"); | ||
| 478 | const element = elementRegistry.get(item); | ||
| 479 | const conditionExpression = | ||
| 480 | element.businessObject.conditionExpression; | ||
| 481 | if (conditionExpression) { | ||
| 482 | canvas.addMarker(item, "condition-expression"); | ||
| 483 | } | ||
| 484 | } | ||
| 485 | }); | ||
| 315 | } | 486 | } |
| 316 | } | 487 | if (Array.isArray(finishedTaskSet)) { |
| 317 | } | 488 | finishedTaskSet.forEach((item) => canvas.addMarker(item, "success")); |
| 489 | } | ||
| 490 | if (Array.isArray(unfinishedTaskSet)) { | ||
| 491 | unfinishedTaskSet.forEach((item) => canvas.addMarker(item, "primary")); | ||
| 492 | } | ||
| 493 | if (Array.isArray(rejectedTaskSet)) { | ||
| 494 | rejectedTaskSet.forEach((item) => { | ||
| 495 | if (item != null) { | ||
| 496 | const element = elementRegistry.get(item); | ||
| 497 | if (element.type.includes("Task")) { | ||
| 498 | canvas.addMarker(item, "danger"); | ||
| 499 | } else { | ||
| 500 | canvas.addMarker(item, "warning"); | ||
| 501 | } | ||
| 502 | } | ||
| 503 | }); | ||
| 504 | } | ||
| 505 | }, | ||
| 506 | }, | ||
| 507 | }; | ||
| 318 | </script> | 508 | </script> |
| 319 | <style scoped lang="scss"> | 509 | <style scoped lang="scss"> |
| 320 | .information-list { | 510 | .information-list { |
| 321 | height: 220px; | 511 | height: 220px; |
| 322 | margin-top: 10px; | 512 | margin-top: 10px; |
| 323 | 513 | ||
| 324 | p { | 514 | p { |
| 325 | font-size: 16px; | 515 | font-size: 16px; |
| 326 | line-height: 24px; | 516 | line-height: 24px; |
| 327 | } | ||
| 328 | } | ||
| 329 | /deep/.bjs-powered-by { | ||
| 330 | display: none; | ||
| 331 | } | 517 | } |
| 332 | // /deep/.information-list { | 518 | } |
| 333 | // height: 170px; | 519 | /deep/.bjs-powered-by { |
| 334 | // overflow: visible; | 520 | display: none; |
| 335 | // } | 521 | } |
| 522 | // /deep/.information-list { | ||
| 523 | // height: 170px; | ||
| 524 | // overflow: visible; | ||
| 525 | // } | ||
| 336 | </style> | 526 | </style> | ... | ... |
| ... | @@ -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