Skip to content

Commit fcca303

Browse files
dream2023dream2023
committed
refactor: 将lodash替换为自定义函数
1 parent 4528424 commit fcca303

File tree

11 files changed

+89
-60
lines changed

11 files changed

+89
-60
lines changed

‎lib/EleForm.vue

Lines changed: 21 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -100,16 +100,14 @@
100100

101101
<script>
102102
import responsiveMixin from './mixins/responsiveMixin'
103-
import utils from './tools/utils'
103+
import { isUnDef, is, castArray, getDeepVal, setDeepVal } from './tools/utils'
104104
import { throttle } from 'throttle-debounce'
105105
import localeMixin from 'element-ui/src/mixins/locale'
106106
import { t } from './locale'
107107
import { loadMockJs } from './tools/mock'
108108
import { equal, intersection } from './tools/set'
109109
const isNumber = require('is-number')
110110
const cloneDeep = require('lodash.clonedeep')
111-
const lodashSet = require('lodash.set')
112-
const lodashGet = require('lodash.get')
113111
114112
export default {
115113
name: 'EleForm',
@@ -317,7 +315,7 @@ export default {
317315
return btns
318316
},
319317
computedIsShowCancelBtn() {
320-
if (utils.is(this.isShowCancelBtn, 'Boolean')) {
318+
if (is(this.isShowCancelBtn, 'Boolean')) {
321319
// 如果指定了, 则使用指定的值
322320
return this.isShowCancelBtn
323321
} else {
@@ -327,15 +325,15 @@ export default {
327325
},
328326
// 是否显示返回按钮(inline和layout模式下不同)
329327
computedIsShowBackBtn() {
330-
if (utils.is(this.isShowBackBtn, 'Boolean')) {
328+
if (is(this.isShowBackBtn, 'Boolean')) {
331329
return this.isShowBackBtn
332330
} else {
333331
return !(this.inline || this.isDialog)
334332
}
335333
},
336334
// 提交按钮默认值(inline和layout模式下不同)
337335
computedSubmitBtnText() {
338-
if (utils.is(this.submitBtnText, 'String')) {
336+
if (is(this.submitBtnText, 'String')) {
339337
return this.submitBtnText
340338
} else {
341339
return this.inline
@@ -360,21 +358,10 @@ export default {
360358
// 此函数即将局部定义转为全局定义
361359
computedRules() {
362360
return this.formDescKeys.reduce((rules, field) => {
363-
let formRules = rules[field] || []
364-
let formItemRules = this.computedFormDesc[field].rules
365-
366-
// 转为数组
367-
if (formRules && !Array.isArray(formRules)) {
368-
formRules = [formRules]
369-
}
370-
if (formItemRules && !Array.isArray(formItemRules)) {
371-
formItemRules = [formItemRules]
372-
}
373-
374-
// 合并
375-
if (formRules || formItemRules) {
376-
rules[field] = [...(formItemRules || []), ...(formRules || [])]
377-
}
361+
// 合并 (全局 和 局部) 的rules
362+
let formRules = castArray(this.rules[field])
363+
let formItemRules = castArray(this.computedFormDesc[field].rules)
364+
rules[field] = [...formRules, ...formItemRules]
378365
379366
// 如果采用required, 则判断已有的规则有无, 如果没有, 则添加
380367
if (
@@ -387,7 +374,7 @@ export default {
387374
})
388375
}
389376
return rules
390-
}, this.rules || {})
377+
}, {})
391378
},
392379
// formDesc的key
393380
formDescKeys() {
@@ -397,7 +384,7 @@ export default {
397384
const desc = this.getDeepFormDesc(this.formDesc)
398385
Object.keys(desc).forEach(field => {
399386
// 当全局设置mock为true时, 所有子项都标记为true
400-
if (this.mock && utils.isUnDef(desc[field].mock)) {
387+
if (this.mock && isUnDef(desc[field].mock)) {
401388
desc[field].mock = true
402389
}
403390
@@ -438,7 +425,7 @@ export default {
438425
computedFormDesc: {
439426
handler(desc) {
440427
if (desc) {
441-
this.formDescKeys.forEach(field => {
428+
Object.keys(desc).forEach(field => {
442429
// 设置深度边遍历的默认值
443430
this.setDeepFormDataVal(field)
444431
})
@@ -469,18 +456,12 @@ export default {
469456
// 获取值
470457
// 'a.b.c' => this.formData.a.b.c
471458
getValue(field) {
472-
return field
473-
.split('.')
474-
.reduce((acc, key) => (acc ? acc[key] : acc), this.formData)
459+
return getDeepVal(this.formData, field)
475460
},
476461
// 设置值
477462
// 例如 ('a.b.c', 'val') => this.formData.a.b.c = 'val'
478463
setValue(field, value) {
479-
const fields = field.split('.')
480-
const dateItem = fields
481-
.slice(0, -1)
482-
.reduce((acc, key) => acc[key], this.formData)
483-
this.$set(dateItem, fields.slice(-1), value)
464+
setDeepVal(this.formData, field, value, true)
484465
},
485466
// 给需要深度遍历的对象赋值空对象, 以便 v-model 时不出错
486467
// 例如 formDesc: { info: { children: { name:{ type: 'input', xxx }, nickname: {type: 'input', xxx } } } } => formData => { info: {} }
@@ -490,7 +471,7 @@ export default {
490471
.slice(0, -1)
491472
.join('.')
492473
if (deepPath) {
493-
lodashSet(this.formData, deepPath, {})
474+
setDeepVal(this.formData, deepPath, {})
494475
}
495476
},
496477
// 深度遍历 formDesc
@@ -568,8 +549,8 @@ export default {
568549
// 保存老数据并获取新类型的数据
569550
const oldKey = `${field}._oldValue.type-${formItem._type}`
570551
const newKey = `${field}._oldValue.type-${type}`
571-
lodashSet(this.formDesc, oldKey, formData[field])
572-
const newVal = lodashGet(formItem, newKey, null)
552+
setDeepVal(this.formDesc, oldKey, formData[field])
553+
const newVal = getDeepVal(formItem, newKey, null)
573554
this.setValue(field, newVal)
574555
}
575556
} else {
@@ -592,14 +573,14 @@ export default {
592573
)
593574
594575
const fullPath = field.split('.').join('.chidlren.')
595-
lodashSet(this.formDesc, fullPath + '._type', type)
596-
lodashSet(this.formDesc, fullPath + '._vif', vif)
597-
lodashSet(this.formDesc, fullPath + '._disabled', disabled)
576+
setDeepVal(this.formDesc, fullPath + '._type', type)
577+
setDeepVal(this.formDesc, fullPath + '._vif', vif)
578+
setDeepVal(this.formDesc, fullPath + '._disabled', disabled)
598579
599580
// 4.重新获取 options
600581
if (formItem.isReloadOptions) {
601582
this.changeOptions(
602-
lodashGet(this.formDesc, fullPath),
583+
getDeepVal(this.formDesc, fullPath),
603584
formItem.options,
604585
field,
605586
true
@@ -636,7 +617,7 @@ export default {
636617
// 将options转为对象数组
637618
getObjArrOptions(options) {
638619
return options.map(option => {
639-
if (utils.is(option, ['Number', 'String', 'Boolean'])) {
620+
if (is(option, ['Number', 'String', 'Boolean'])) {
640621
// 例如 ['男', '女'] => [ { text: '男', value: '男' }, { text: '女', value: '女' } ]
641622
return {
642623
text: option,

‎lib/EleFormGroup.vue

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,7 @@
5454
</template>
5555

5656
<script>
57-
import utils from './tools/utils'
57+
import { isDef } from './tools/utils'
5858
5959
export default {
6060
name: 'EleFormGroup',
@@ -126,7 +126,7 @@ export default {
126126
this.getDeepFormDesc = this.$refs['ele-form'].getDeepFormDesc
127127
})
128128
// 获取默认激活的分组
129-
if (utils.isDef(this.activeGroupId)) {
129+
if (isDef(this.activeGroupId)) {
130130
this.currentGroupId = this.activeGroupId
131131
} else {
132132
// 使用groups中的第一个

‎lib/components/EleFormCheckbox.vue

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@
1717

1818
<script>
1919
import formMixin from '../mixins/formMixin'
20-
import utils from '../tools/utils'
20+
import { isUnDef } from '../tools/utils'
2121
2222
export default {
2323
name: 'EleFormCheckbox',
@@ -39,7 +39,7 @@ export default {
3939
},
4040
methods: {
4141
customInit (val) {
42-
if (utils.isUnDef(val)) {
42+
if (isUnDef(val)) {
4343
val = []
4444
}
4545
return val

‎lib/components/EleFormCheckboxButton.vue

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@
1717

1818
<script>
1919
import formMixin from '../mixins/formMixin'
20-
import utils from '../tools/utils'
20+
import { isUnDef } from '../tools/utils'
2121
2222
export default {
2323
name: 'EleFormCheckboxButton',
@@ -39,7 +39,7 @@ export default {
3939
},
4040
methods: {
4141
customInit (val) {
42-
if (utils.isUnDef(val)) {
42+
if (isUnDef(val)) {
4343
val = []
4444
}
4545
return val

‎lib/components/EleFormSwitch.vue

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010

1111
<script>
1212
import formMixin from '../mixins/formMixin'
13-
import utils from '../tools/utils'
13+
import { is } from '../tools/utils'
1414
1515
export default {
1616
name: 'EleFormSwitch',
@@ -25,7 +25,7 @@ export default {
2525
return Boolean(val)
2626
},
2727
handleChange (value) {
28-
if (utils.is(this.value, 'Number')) {
28+
if (is(this.value, 'Number')) {
2929
value = Number(value)
3030
}
3131
this.$emit('input', value)

‎lib/components/EleFormTransfer.vue

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@
2121

2222
<script>
2323
import formMixin from '../mixins/formMixin'
24-
import utils from '../tools/utils'
24+
import { isUnDef } from '../tools/utils'
2525
import mock from '../tools/mock'
2626
2727
export default {
@@ -44,7 +44,7 @@ export default {
4444
},
4545
methods: {
4646
customInit (val) {
47-
if (utils.isUnDef(val)) {
47+
if (isUnDef(val)) {
4848
val = []
4949
}
5050
return val

‎lib/components/EleFormYesno.vue

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515

1616
<script>
1717
import formMixin from '../mixins/formMixin'
18-
import utils from '../tools/utils'
18+
import { is } from '../tools/utils'
1919
2020
export default {
2121
name: 'EleFormYesno',
@@ -30,7 +30,7 @@ export default {
3030
return Boolean(val)
3131
},
3232
handleChange (value) {
33-
if (utils.is(this.value, 'Number')) {
33+
if (is(this.value, 'Number')) {
3434
value = Number(value)
3535
}
3636
this.$emit('input', value)

‎lib/mixins/formMixin.js

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import ExtendSlot from '../ExtendSlot'
22
import attrsMixin from './attrsMixin'
3-
import utils from '../tools/utils'
3+
import { is, isUnDef, isDef } from '../tools/utils'
44
import localMixin from './locale'
55
import mock from '../tools/mock'
66

@@ -86,8 +86,8 @@ export default {
8686

8787
// 检查类型
8888
checkType (val, isDefault = false) {
89-
if (this.type && utils.isDef(val)) {
90-
const isOk = utils.is(val, this.type)
89+
if (this.type && isDef(val)) {
90+
const isOk = is(val, this.type)
9191
if (!isOk) {
9292
// eslint-disable-next-line
9393
console.error(
@@ -111,12 +111,12 @@ export default {
111111
const isArr = Array.isArray(value)
112112
// 值为空
113113
if (
114-
utils.isUnDef(value) ||
114+
isUnDef(value) ||
115115
value === '' ||
116116
(isArr && value.length === 0)
117117
) {
118118
// 默认值不为空
119-
if (utils.isDef(this.desc.default)) {
119+
if (isDef(this.desc.default)) {
120120
let defaultValue = this.desc.default
121121
// 判断是否有格式化函数
122122
if (this.desc.displayFormatter) {

‎lib/mixins/responsiveMixin.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { throttle } from 'throttle-debounce'
2-
import utils from '../tools/utils'
2+
import { getSize } from '../tools/utils'
33

44
export default {
55
props: {
@@ -86,7 +86,7 @@ export default {
8686
let { clientWidth } = this.$refs.wrapper
8787
if (clientWidth === 0) {
8888
// 隐藏的节点, 宽度为0
89-
clientWidth = utils.getSize(this.$refs.wrapper).width
89+
clientWidth = getSize(this.$refs.wrapper).width
9090
}
9191

9292
this.parentElWidth = clientWidth

‎lib/tools/utils.js

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
import Vue from 'vue'
2+
13
// 是否定义
24
export function isDef (val) {
35
return !isUnDef(val)
@@ -89,6 +91,52 @@ export function getSize (elem) {
8991
}
9092
}
9193

94+
// 获取深度val值
95+
// const object = { 'a': { 'b': { 'c': 3 } } };
96+
// getDeepVal(obj, 'a.b.c') => 3
97+
// getDeepVal(obj, 'a.e.c', 0) => 0
98+
export function getDeepVal (obj, path, defaultVal) {
99+
return path
100+
.split('.')
101+
.reduce((acc, key) => acc ? acc[key] : undefined, obj) || defaultVal
102+
}
103+
104+
// 设置深度val值
105+
// isResponse 是否使用 Vue.set
106+
// const object = { 'a': { 'b': { 'c': 3 } } }
107+
// setDeepVal(object, 'a.b.c', 10) => { 'a': { 'b': { 'c': 10 } } }
108+
export function setDeepVal (obj, path, value, isResponse = false) {
109+
const fields = path.split('.')
110+
const dateItem = fields
111+
.slice(0, -1)
112+
.reduce((acc, key) => {
113+
if (typeof acc[key] !== 'object') {
114+
acc[key] = {}
115+
}
116+
return acc[key]
117+
}, obj)
118+
119+
const lastKey = fields.slice(-1)
120+
if (isResponse) {
121+
Vue.set(dateItem, lastKey, value)
122+
} else {
123+
dateItem[lastKey] = value
124+
}
125+
}
126+
127+
// 如果 value 不是数组, 那么强制转为数组
128+
// 空转为空数组 undefined | null | '' => []
129+
// 1 => [1], false => [false], {} => [{}]
130+
export function castArray (value) {
131+
if (Array.isArray(value)) {
132+
return value
133+
} else if (value === undefined || value === null || value === '') {
134+
return []
135+
} else {
136+
return [value]
137+
}
138+
}
139+
92140
export default {
93141
isDef,
94142
isUnDef,

0 commit comments

Comments
 (0)