yanzhen-design-vue
Version:
132 lines (131 loc) • 4.22 kB
JavaScript
import { useAttrs, ref, onMounted, computed } from "vue";
import { message } from "ant-design-vue";
import { useProxy } from "../../../hooks/use-proxy/index.mjs";
import "./hooks/index.mjs";
import { selectExtraProps } from "./select.mjs";
import { provideSelectApi } from "./hooks/use-select-apis.mjs";
function useSelect(props, emit) {
const attrs = useAttrs();
const { getColumnOptionSetQuery } = provideSelectApi(props);
const createItem = ref("");
const createOptionIsExits = ref(false);
const searchMatchOption = ref(false);
const selectCtx = ref();
const options = ref();
onMounted(() => {
selectCtx.value.$el.querySelector(".ant-select-selection-search-input").setAttribute("maxlength", props.createOptionMaxLength);
options.value = props.fetching ? [] : props.options;
});
const showCreateOptionButton = computed(() => {
return !props.fetching && props.showCreateOption && !createOptionIsExits.value && createItem.value.length > 0;
});
const addOptionHandler = async () => {
emit("addOption", createItem.value);
};
const dropdownVisibleChangeHandler = async (visible) => {
var _a;
if (visible) {
const { bizObjectModelCode, dataSource, tswColumnCode, tswColumnBizType } = props;
if (dataSource === "4") {
const result = await getColumnOptionSetQuery({
data: {
dataTagCode: bizObjectModelCode,
columnCode: tswColumnCode,
columnBizType: tswColumnBizType
// bizObjectParameters: {
// [bizObjectModelCode]: dataCommon,
// },
}
});
const allOptions = (_a = result == null ? void 0 : result.data) == null ? void 0 : _a.options;
options.value = allOptions.map((item) => {
return {
[props.labelKey]: item.optionValue,
value: item.optionKey
};
});
}
}
};
const proxyProps = useProxy({
excludeProps: Object.keys(selectExtraProps),
props: {
showSearch: computed(() => {
return props.showCreateOption || props.showSearch;
}),
placeholder: computed(() => {
return props.showCreateOption ? "搜索或创建选项" : props.placeholder;
}),
options: computed(() => {
if (props.fetching) {
return [];
} else {
let ans = [];
switch (props.dataSource) {
case "1":
ans = options.value;
break;
case "4":
ans = options.value;
break;
}
return ans;
}
}),
style: computed(() => {
return Object.assign({ width: "100%" }, attrs.style);
}),
fieldNames: computed(() => {
return {
label: props.labelKey,
value: props.valueKey
};
})
},
on: {
change: (val, option) => {
if (Array.isArray(val) && props.max && val.length > props.max) {
message.error(props.maxMsg || `最多选择${props.max}个`);
val.pop();
emit("change", val, option);
emit("update:value", val);
}
},
search: (val) => {
var _a;
if (val.length > props.createOptionMaxLength) {
message.info({
content: `支持最大${props.createOptionMaxLength}字符`,
key: "select-max-tip"
}).then((r) => r);
}
createItem.value = val.length > props.createOptionMaxLength ? val.slice(0, props.createOptionMaxLength) : val;
createOptionIsExits.value = false;
searchMatchOption.value = false;
(_a = props.options) == null ? void 0 : _a.forEach((item) => {
if (item.label === createItem.value) {
createOptionIsExits.value = true;
}
if (item.label.toLowerCase().includes(val.toLowerCase())) {
searchMatchOption.value = true;
}
});
emit("search", val);
}
}
});
return [
{
selectCtx,
proxyProps,
showCreateOptionButton,
addOptionHandler,
dropdownVisibleChangeHandler,
createItem,
searchMatchOption
}
];
}
export {
useSelect
};