yanzhen-design-vue
Version:
202 lines (201 loc) • 6.55 kB
JavaScript
"use strict";
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const vue = require("vue");
const antDesignVue = require("ant-design-vue");
const index = require("../../../hooks/use-proxy/index.cjs");
const selectPage = require("./selectPage.cjs");
const _hoisted_1 = { key: 2 };
const _sfc_main = /* @__PURE__ */ vue.defineComponent({
...{ name: selectPage.selectPageName },
__name: "selectPage",
props: selectPage.selectPageProps,
emits: selectPage.selectPageEmits,
setup(__props, { expose: __expose, emit: __emit }) {
const { ns } = selectPage.selectPageOptions;
const props = __props;
const emit = __emit;
const attrs = vue.useAttrs();
const selectCtx = vue.ref();
const VNodes = vue.defineComponent({
props: {
vnodes: {
type: Object,
required: true
}
},
setup(props2) {
return () => {
return props2.vnodes;
};
}
});
const loading = vue.ref(false);
const activeKey = vue.ref("");
const searchValue = vue.ref("");
const options = vue.ref([]);
const pagination = {
pageNo: 1,
pageSize: 10,
total: 0,
hasNoMoreData: false
};
const hasTable = vue.computed(() => {
return props.tabsList.length > 0;
});
const filterOptions = vue.computed(() => {
const params = {};
if (props.searchKey) {
params[props.searchKey] = searchValue.value || "";
}
if (props.tabKey) {
params[props.tabKey] = activeKey.value;
}
return params;
});
vue.watch(
() => props.options,
() => {
options.value = props.options || [];
},
{
immediate: true
}
);
vue.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 = index.useProxy({
props: {
style: vue.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 vue.openBlock(), vue.createBlock(vue.unref(antDesignVue.Select), vue.mergeProps({
ref_key: "selectCtx",
ref: selectCtx,
class: [vue.unref(ns).b()]
}, vue.unref(bindProxy)), {
dropdownRender: vue.withCtx(({ menuNode: menu }) => [
vue.renderSlot(_ctx.$slots, "banner"),
hasTable.value ? (vue.openBlock(), vue.createBlock(vue.unref(antDesignVue.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: vue.withCtx(() => [
(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.tabsList, (tab) => {
return vue.openBlock(), vue.createBlock(vue.unref(antDesignVue.TabPane), {
key: tab.key,
tab: tab.name
}, {
default: vue.withCtx(() => [
vue.createVNode(vue.unref(VNodes), { vnodes: menu }, null, 8, ["vnodes"])
]),
_: 2
}, 1032, ["tab"]);
}), 128))
]),
_: 2
}, 1032, ["modelValue"])) : (vue.openBlock(), vue.createBlock(vue.unref(VNodes), {
key: 1,
vnodes: menu
}, null, 8, ["vnodes"])),
loading.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
vue.createVNode(vue.unref(antDesignVue.Spin), {
size: "small",
spinning: loading.value
}, null, 8, ["spinning"])
])) : vue.createCommentVNode("", true)
]),
option: vue.withCtx((item) => [
_ctx.showTag ? (vue.openBlock(), vue.createBlock(vue.unref(antDesignVue.Tag), {
key: 0,
color: item.color
}, {
default: vue.withCtx(() => [
vue.createTextVNode(vue.toDisplayString(item.name), 1)
]),
_: 2
}, 1032, ["color"])) : (vue.openBlock(), vue.createBlock(vue.unref(antDesignVue.Tooltip), {
key: 1,
placement: "top"
}, {
title: vue.withCtx(() => [
vue.createElementVNode("span", null, vue.toDisplayString(item.name || item.label), 1)
]),
default: vue.withCtx(() => [
vue.createElementVNode("span", null, vue.toDisplayString(item.name || item.label), 1)
]),
_: 2
}, 1024))
]),
_: 3
}, 16, ["class"]);
};
}
});
exports.default = _sfc_main;