Skip to content

Commit

Permalink
Merge pull request #178 from ly525/vipshop-github-upstream-master-ref…
Browse files Browse the repository at this point in the history 
…actor-field-edit-operation-mixin

refactor(ams/mixins/field-edit-options-mixin): 引入optional chaining
  • Loading branch information
@wuzebin
wuzebin authored Jul 15, 2021
2 parents c4fc621 + 7cc908a commit 4caed34
Show file tree
Hide file tree
Showing 5 changed files with 85 additions and 48 deletions.
6 changes: 5 additions & 1 deletion babel.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,11 @@ module.exports = function (api) {
}
]
];
const plugins = ['transform-vue-jsx', '@babel/plugin-transform-runtime'];
const plugins = [
'transform-vue-jsx',
'@babel/plugin-transform-runtime',
'@babel/plugin-proposal-optional-chaining'
];
const env = {
'test': {
'presets': [['@babel/preset-env', { 'targets': { 'node': 'current' }}]]
Expand Down
5 changes: 2 additions & 3 deletions examples/router/babel.config.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
module.exports = {
presets: [
'@vue/app'
]
presets: ['@vue/app'],
plugins: ['@babel/plugin-proposal-optional-chaining']
};
9 changes: 5 additions & 4 deletions examples/router/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,18 +21,19 @@
"vue-router": "^3.0.2"
},
"devDependencies": {
"@babel/plugin-proposal-optional-chaining": "^7.14.5",
"@vue/cli-plugin-babel": "^3.10.0",
"@vue/cli-plugin-eslint": "^3.10.0",
"@vue/cli-service": "^3.10.0",
"autoprefixer": "^9.6.1",
"babel-eslint": "^10.0.1",
"eslint": "^5.16.0",
"sass": "^1.30.0",
"eslint-plugin-vue": "^5.0.0",
"vue-template-compiler": "^2.6.10",
"eslint-config-alloy": "^2.0.5",
"eslint-plugin-vue": "^5.0.0",
"sass": "^1.30.0",
"sass-loader": "^7.2.0",
"vue-eslint-parser": "^6.0.4",
"sass-loader": "^7.2.0"
"vue-template-compiler": "^2.6.10"
},
"eslintConfig": {
"root": true,
Expand Down
1 change: 1 addition & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,7 @@
},
"devDependencies": {
"@babel/core": "^7.4.4",
"@babel/plugin-proposal-optional-chaining": "^7.14.5",
"@babel/plugin-syntax-jsx": "^7.2.0",
"@babel/plugin-transform-runtime": "^7.4.4",
"@babel/preset-env": "^7.4.4",
Expand Down
112 changes: 72 additions & 40 deletions src/ams/mixins/field-edit-options-mixin.js
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
import { getType } from '../../utils';

export default {
data() {
return {
Expand All @@ -9,18 +11,30 @@ export default {
isSelectAll: {
set(val) {
if (val) {
this.localValue = this.options.filter(item => !item.disabled).map(item => item.value);
this.localValue = this.options
.filter(item => !item.disabled)
.map(item => item.value);
} else {
this.localValue = [];
}
this.$nextTick(() => {
this.on && typeof this.on.change === 'function' && this.on.change(this.localValue);
// https://babeljs.io/docs/en/babel-plugin-proposal-optional-chaining
typeof this.on?.change === 'function' &&
this.on.change(this.localValue);
});
},
get() {
if (!this.localValue || this.localValue.length === 0 || !this.isShowSelectAllCheck) return false;
const allValues = this.options.filter(item => !item.disabled).map(item => item.value);
return allValues.every(item => this.localValue.indexOf(item) >= 0);
if (
!this.localValue ||
this.localValue.length === 0 ||
!this.isShowSelectAllCheck
) { return false }
const allValues = this.options
.filter(item => !item.disabled)
.map(item => item.value);
return allValues.every(
item => this.localValue.indexOf(item) >= 0
);
}
},
isShowSelectAllCheck() {
Expand All @@ -31,49 +45,67 @@ export default {
return field.props.multiple && field.props['select-all'];
},
indeterminate() {
return Boolean(this.localValue.length && this.localValue.length < this.options.filter(item => !item.disabled).length);
return Boolean(
this.localValue.length &&
this.localValue.length <
this.options.filter(item => !item.disabled).length
);
},
options() {
let options = [];
if (Array.isArray(this.field.props.options)) {
if (
!(
this.field.useStringValue === false ||
this.isSingleOptions(this.field)
)
) {
this.field.props.options.forEach(item => {
item.value = String(item.value);
});
}
options = this.field.props.options;
} else if (typeof this.field.props.options === 'object') {
Object.keys(this.field.props.options).forEach(key => {
options.push({
value: key,
label: this.field.props.options[key]
});
});
let options = this.field.props.options;
const type = getType(options);
switch (type) {
case 'array':
this.mayStringifyOptionValue(options);
break;
case 'object':
options = this.object2Array(options);
break;
default:
break;
}

return options;
}
},
methods: {
/**
* 按需将option.value 转为字符串类型
* @param {*} options
*/
mayStringifyOptionValue(options) {
// 注意这里 !== false，和默认为true是两种含义，因为有可能不配置 useStringValue，即： field = {}
// [设计原则]这里感觉设计上不合理，后期设计API需要考虑：如果用户需要，可以通过开关打开，而不是默认打开，通过开关进行关闭
if (
!(
this.field.useStringValue === false ||
this.isSingleOptions(this.field)
)
) {
options.forEach(item => {
item.value = String(item.value);
});
}
},
/**
* 对象转数组 {value: label} => [{ label, value }]
* @param {*} optionsObj {value1: label1, value2: label2}
* @returns [{ label, value }]
*/
object2Array(optionsObj) {
return Object.entries(optionsObj).map(([key, value]) => ({ label: value, value: key }));
},
isSingleOptions(field) {
return (
field.type === 'radio' ||
(field.type === 'select' && field.props.multiple === false)
);
const singleSelect =
field.type === 'select' && field.props.multiple === false; // 单选
return field.type === 'radio' || singleSelect;
},
initRemoteOptions(value) {
const remoteConfig = this.field.remoteConfig;
// 值为空时如果isInitEmpty为false则不请求
if (!value && !remoteConfig.isInitEmpty || !remoteConfig.isInitRemoteOptions) {
return;
const { isInitEmpty, isInitRemoteOptions, remoteMethod } = this.field.remoteConfig;
const isInitWhenEmptyValue = !value && isInitEmpty; // // 值为空 && 允许空值检索
if (isInitWhenEmptyValue || isInitRemoteOptions) {
this.isInitRemoteOptions = true;
remoteMethod.call(this.$block, this, value, true);
}
this.isInitRemoteOptions = true;
remoteConfig.remoteMethod.call(this.$block, this, value, true);
},
queryRemoteOptions(value) {
const remoteConfig = this.field.remoteConfig;
Expand All @@ -82,9 +114,9 @@ export default {
}
},
initStyle() {
if (this.$refs.select && this.$refs.select.$el) {
this.$refs.select.$el.style.width = `${this.$refs.select.$el.offsetWidth - 55}px`;
}
if (!this.$refs.select?.$el) return;
this.$refs.select.$el.style.width = `${this.$refs.select.$el
.offsetWidth - 55}px`;
}
},

Expand Down

0 comments on commit 4caed34

Please sign in to comment.