chain-saasui
Version:
chain-saasui
88 lines (86 loc) • 2.82 kB
JavaScript
// src/mixins/fieldMixin.js
import { isEmpty } from 'chain-lodash';
export default {
props: {
value: {
type: [String, Number, Array],
default: '',
},
mode: {
// 运行方式 比如 表单、搜索
type: String, // FORM | SEARCH
default: 'FORM',
},
clearable: {
type: Boolean,
default: true,
},
from: {
// 来源 比如 是输入框 还是仅 text预览
type: String, // 'input' | 'text'
default: 'input',
},
placeholder: {
type: String,
default() {
return this.$t('selectGroup.pleaseSelect');
},
},
componentType: {
type: String,
default: 'input', // 'input' | 'select' | 'date' | 等其他类型
},
},
computed: {
newValue: {
get() {
return !isEmpty(this.value) && this.value != null ? String(this.value) : '';
},
set(val) {
this.$emit('input', val);
},
},
textValue() {
// 如果是 select，就展示选项文字
if (this.componentType == 'select') {
const allOptions = this.flattenOptions(this.options);
if (this.multiple) {
const nameArr = allOptions.filter(f => this.newValue.includes(f.value)).map(m => m.label);
return nameArr.length > 1 ? `${nameArr[0]} +${nameArr.length - 1}` : nameArr[0] || '-';
} else {
const obj = allOptions.find(f => f.value == this.newValue) || {};
return obj.label || '-';
}
}
// 默认就是 input 的文本
return this.newValue || '-';
},
attrs() {
const merged = Object.assign({}, this.defaultAttrs, this.$props, this.$attrs);
// 过滤掉一些不需要传递的属性
const exclude = ['value', 'from']; // 不需要传递给el-input的属性
return Object.keys(merged)
.filter(key => !exclude.includes(key))
.reduce((obj, key) => {
obj[key] = merged[key];
return obj;
}, {});
},
onEvents() {
return this.$listeners;
},
},
methods: {
flattenOptions(options) {
const result = [];
options.forEach(item => {
if (item.options) {
result.push(...item.options);
} else {
result.push(item);
}
});
return result;
},
},
};