@arco-vue-pro-components/pro-components
Version:
基于@arco-design/web-vue组件的高级组件，包括pro-table
275 lines (274 loc) • 7.3 kB
JavaScript
;
var vue = require("vue");
var lodash = require("lodash");
var webVue = require("@arco-design/web-vue");
var swrVue = require("swr-vue");
var omit = require("../_utils/omit.js");
var is = require("../_utils/is.js");
var usePureProp = require("../_hooks/use-pure-prop.js");
function _isSlot(s) {
return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !vue.isVNode(s);
}
let testId = 0;
var _ProSelect = vue.defineComponent({
name: "ProSelect",
props: {
cacheForSwr: {
type: Boolean,
default: false
},
columnKey: {
type: String,
default: ""
},
requestSearch: {
type: Boolean,
default: false
},
mode: {
type: String,
default: void 0
},
multiple: {
type: Boolean,
default: void 0
},
modelValue: {
type: [String, Number, Object, Array]
},
fallbackOption: {
type: [Boolean],
default: false
},
defaultValue: {
type: [String, Number, Object, Array],
default: (props) => is.isUndefined(props.multiple) ? "" : []
},
placeholder: String,
bordered: {
type: Boolean,
default: true
},
disabled: {
type: Boolean,
default: false
},
error: {
type: Boolean,
default: false
},
options: {
type: Array,
default: () => []
},
valueKey: {
type: String,
default: "value"
},
size: {
type: String
},
searchDelay: {
type: Number,
default: 500
},
labelKey: {
type: String,
default: "label"
},
allowClear: {
type: Boolean,
default: true
},
allowSearch: {
type: Boolean,
default: true
},
request: {
type: Function
},
maxTagCount: {
type: Number,
default: 0
},
valueOption: {
type: Boolean,
default: false
}
},
emits: {
"update:modelValue": (value) => true,
"change": (value, option) => true
},
setup(props, {
attrs,
slots,
emit
}) {
var _a;
const {
valueKey,
labelKey,
multiple,
valueOption,
cacheForSwr
} = vue.toRefs(props);
const selectRef = vue.ref();
const options = usePureProp.usePureProp(props, "options");
const modelValue = vue.toRef(props, "modelValue");
const keyword = vue.ref("");
const loading = vue.ref(false);
const cacheKey = vue.computed(() => {
if (props.columnKey) {
return props.columnKey.toString();
}
if (props.request) {
testId += 1;
return testId.toString();
}
return "";
});
const fetchData = async () => {
if (!props.request) {
return [];
}
loading.value = true;
const res = await props.request(keyword.value);
loading.value = false;
return res || [];
};
const {
data
} = swrVue.useSWR(() => {
if (!props.request) {
return null;
}
return `${cacheKey.value}_${props.requestSearch ? keyword.value : ""}`;
}, fetchData, {
revalidateIfStale: !cacheForSwr.value,
revalidateOnReconnect: cacheForSwr.value,
revalidateOnFocus: false
});
const optionsEnum = vue.computed(() => {
var _a2, _b;
if (!props.request || !(props.mode === "read")) {
return {};
}
return ((_a2 = options.value) == null ? void 0 : _a2.length) ? (_b = options.value) == null ? void 0 : _b.reduce((pre, cur) => ({
...pre,
[cur[valueKey.value]]: cur[labelKey.value]
}), {}) : {};
});
const getFormatValue = (value2) => {
return is.isNumber(value2) ? `${value2}` : value2;
};
const getModelValue = (value2) => {
if (multiple.value && Array.isArray(value2) && value2.length) {
return value2.map((item) => getFormatValue(item));
}
return getFormatValue(value2);
};
const getSelectedOption = (modelValue2) => {
var _a2, _b;
if (multiple.value && Array.isArray(modelValue2) && modelValue2.length) {
if (options.value && options.value.length) {
const arr = modelValue2.map((mItem) => getSelectedOption(mItem));
return arr;
}
return [];
}
if (is.isUndefined(modelValue2) || is.isNull(modelValue2)) {
return void 0;
}
return (_b = (_a2 = options.value) == null ? void 0 : _a2.filter((item) => getFormatValue(item[valueKey.value]) === modelValue2)) == null ? void 0 : _b[0];
};
const _value = vue.ref(getModelValue((_a = props.modelValue) != null ? _a : props.defaultValue));
vue.watch(data, (data2) => {
if (props.request) {
options.value = data2 || [];
}
}, {
deep: true,
immediate: true
});
vue.watch(modelValue, (value2) => {
if (is.isUndefined(value2) || is.isNull(value2)) {
_value.value = multiple.value ? [] : void 0;
} else {
_value.value = getModelValue(value2);
}
});
const value = vue.computed({
get: () => {
return _value.value;
},
set: (val) => {
_value.value = val;
let option = void 0;
if (valueOption.value) {
option = getSelectedOption(val);
}
emit("update:modelValue", val);
emit("change", val, option);
}
});
const handleSearch = (value2) => {
keyword.value = value2;
};
const debounceSetKeyword = lodash.debounce((value2) => {
keyword.value = value2;
}, props.searchDelay || 500);
const handleClear = () => {
debounceSetKeyword("");
};
const handleInputValueChange = (value2) => {
if (!value2) {
debounceSetKeyword("");
}
};
const parsingText = (text) => {
if (Array.isArray(text)) {
let _slot;
return vue.createVNode(webVue.Space, {
"size": 16
}, _isSlot(_slot = text.map((item) => vue.createVNode("span", {
"key": item
}, [optionsEnum.value[item]]))) ? _slot : {
default: () => [_slot]
});
}
return optionsEnum.value[text];
};
const restProps = vue.computed(() => omit.omit(props, ["options"]));
return () => {
if (props.mode === "read") {
return parsingText(value.value);
}
return vue.createVNode("div", {
"style": "width: 100%"
}, [vue.createVNode(webVue.Select, vue.mergeProps(restProps.value, attrs, {
"modelValue": value.value,
"onUpdate:modelValue": ($event) => value.value = $event,
"loading": loading.value,
"ref": selectRef,
"onSearch": handleSearch,
"onClear": handleClear,
"onInputValueChange": handleInputValueChange
}), {
default: () => {
return options.value.map((item) => vue.createVNode(webVue.Option, {
"key": item[valueKey.value],
"value": getFormatValue(item[valueKey.value]),
"label": item[labelKey.value],
"title": item[labelKey.value],
"disabled": item.disabled
}, {
default: () => [item[labelKey.value]]
}));
},
...slots
})]);
};
}
});
module.exports = _ProSelect;