yanzhen-design-vue
Version:
202 lines (201 loc) • 6.41 kB
JavaScript
import { defineComponent, useAttrs, ref, computed, watch, onBeforeMount, openBlock, createBlock, unref, mergeProps, withCtx, renderSlot, createElementBlock, Fragment, renderList, createVNode, createCommentVNode, createTextVNode, toDisplayString, createElementVNode } from "vue";
import { Select, Tabs, TabPane, Spin, Tag, Tooltip } from "ant-design-vue";
import { useProxy } from "../../../hooks/use-proxy/index.mjs";
import { selectPageName, selectPageProps, selectPageEmits, selectPageOptions } from "./selectPage.mjs";
const _hoisted_1 = { key: 2 };
const _sfc_main = /* @__PURE__ */ defineComponent({
...{ name: selectPageName },
__name: "selectPage",
props: selectPageProps,
emits: selectPageEmits,
setup(__props, { expose: __expose, emit: __emit }) {
const { ns } = selectPageOptions;
const props = __props;
const emit = __emit;
const attrs = useAttrs();
const selectCtx = ref();
const VNodes = defineComponent({
props: {
vnodes: {
type: Object,
required: true
}
},
setup(props2) {
return () => {
return props2.vnodes;
};
}
});
const loading = ref(false);
const activeKey = ref("");
const searchValue = ref("");
const options = ref([]);
const pagination = {
pageNo: 1,
pageSize: 10,
total: 0,
hasNoMoreData: false
};
const hasTable = computed(() => {
return props.tabsList.length > 0;
});
const filterOptions = computed(() => {
const params = {};
if (props.searchKey) {
params[props.searchKey] = searchValue.value || "";
}
if (props.tabKey) {
params[props.tabKey] = activeKey.value;
}
return params;
});
watch(
() => props.options,
() => {
options.value = props.options || [];
},
{
immediate: true
}
);
onBeforeMount(() => {
if (Array.isArray(props.tabsList) && props.tabsList.length > 0) {
activeKey.value = props.tabsList[0].key;
}
loadMore();
});
const tabChange = (activeKey2) => {
Object.assign(pagination, {
pageNo: 1,
total: 0,
hasNoMoreData: false
});
options.value = [];
loading.value = false;
loadMore();
emit("tabChange", activeKey2);
};
const loadMore = async () => {
if (!props.loadMore) return;
loading.value = true;
const { total = 0, options: newOptions = [] } = await props.loadMore({
pageNo: pagination.pageNo,
pageSize: pagination.pageSize,
...filterOptions.value
});
Object.assign(pagination, {
pageNo: pagination.pageNo + 1,
total
});
options.value = [...options.value, ...newOptions];
if (options.value.length >= pagination.total) {
pagination.hasNoMoreData = true;
}
loading.value = false;
};
const bindProxy = useProxy({
props: {
style: computed(() => {
return Object.assign({ width: "100%" }, attrs.style);
}),
options
},
on: {
search: (val) => {
searchValue.value = val;
if (props.loadMore) {
pagination.pageNo = 1;
pagination.hasNoMoreData = false;
options.value = [];
loadMore();
}
emit("search", val);
},
popupScroll: (e) => {
if (!props.loadMore) return;
const target = e.target;
if (target && target.scrollTop + target.offsetHeight === target.scrollHeight) {
if (loading.value || pagination.hasNoMoreData) {
return;
}
loadMore();
}
emit("popupScroll", e);
}
}
});
__expose({
ref: selectCtx
});
return (_ctx, _cache) => {
return openBlock(), createBlock(unref(Select), mergeProps({
ref_key: "selectCtx",
ref: selectCtx,
class: [unref(ns).b()]
}, unref(bindProxy)), {
dropdownRender: withCtx(({ menuNode: menu }) => [
renderSlot(_ctx.$slots, "banner"),
hasTable.value ? (openBlock(), createBlock(unref(Tabs), {
key: 0,
modelValue: activeKey.value,
"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => activeKey.value = $event),
type: "card",
onChange: tabChange,
onMousedown: _cache[1] || (_cache[1] = (e) => e.preventDefault())
}, {
default: withCtx(() => [
(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.tabsList, (tab) => {
return openBlock(), createBlock(unref(TabPane), {
key: tab.key,
tab: tab.name
}, {
default: withCtx(() => [
createVNode(unref(VNodes), { vnodes: menu }, null, 8, ["vnodes"])
]),
_: 2
}, 1032, ["tab"]);
}), 128))
]),
_: 2
}, 1032, ["modelValue"])) : (openBlock(), createBlock(unref(VNodes), {
key: 1,
vnodes: menu
}, null, 8, ["vnodes"])),
loading.value ? (openBlock(), createElementBlock("div", _hoisted_1, [
createVNode(unref(Spin), {
size: "small",
spinning: loading.value
}, null, 8, ["spinning"])
])) : createCommentVNode("", true)
]),
option: withCtx((item) => [
_ctx.showTag ? (openBlock(), createBlock(unref(Tag), {
key: 0,
color: item.color
}, {
default: withCtx(() => [
createTextVNode(toDisplayString(item.name), 1)
]),
_: 2
}, 1032, ["color"])) : (openBlock(), createBlock(unref(Tooltip), {
key: 1,
placement: "top"
}, {
title: withCtx(() => [
createElementVNode("span", null, toDisplayString(item.name || item.label), 1)
]),
default: withCtx(() => [
createElementVNode("span", null, toDisplayString(item.name || item.label), 1)
]),
_: 2
}, 1024))
]),
_: 3
}, 16, ["class"]);
};
}
});
export {
_sfc_main as default
};