tav-ui
Version:
219 lines (216 loc) • 9.06 kB
JavaScript
import { defineComponent, ref, unref, nextTick, watch, computed, resolveComponent, openBlock, createElementBlock, createVNode, withCtx, createTextVNode, toDisplayString, mergeProps, createElementVNode, normalizeClass, normalizeStyle, Fragment, renderList, createCommentVNode, createBlock } from 'vue';
import { TaModal } from '../../modal/index2.mjs';
import { TaButton } from '../../button/index2.mjs';
import '../../../locales/index2.mjs';
import './types/index2.mjs';
import CascadePro from './components/cascade-pro2.mjs';
import './constants/index2.mjs';
import _export_sfc from '../../../../_virtual/plugin-vue_export-helper.mjs';
import { cascadeProSelectProps } from './types/props2.mjs';
import { buildCascadeProId, DEFAULT_CASCADE_PRO_OPTIONS_KEY_CONFIG } from './constants/props2.mjs';
import { tavI18n } from '../../../locales/transfer2.mjs';
const _sfc_main = defineComponent({
name: "TaCascadeProSelect",
components: { Modal: TaModal, Button: TaButton, CascadePro },
inheritAttrs: false,
props: cascadeProSelectProps,
emits: ["change"],
setup(props, { attrs, emit }) {
const id = props.id ?? buildCascadeProId();
const cascadeProRef = ref(null);
const visible = ref(false);
const selectValue = ref([]);
const selectDefaultValue = ref(props.value);
const selectOptions = ref([]);
const handleFormItemResult = (options) => {
if (unref(options).length > props.maxTagCount) {
const rest = unref(selectValue).slice(0, props.maxTagCount);
const ellipse = {
id: "cascade-prop-ellipse",
idPath: "cascade-prop-ellipse",
pid: "cascade-prop-ellipse-pid",
name: `+${unref(selectValue).length - props.maxTagCount}...`,
namePath: `+${unref(selectValue).length - props.maxTagCount}...`
};
return [...rest, ellipse];
}
return unref(options);
};
const handleSelectResult = (options, type = "inner") => {
if (type === "inner") {
return unref(options).map((option) => {
const temp = { ...option };
for (const [k, v] of Object.entries(DEFAULT_CASCADE_PRO_OPTIONS_KEY_CONFIG)) {
if (option[k]) {
temp[v] = option[k];
}
}
const idPathSplitResult = temp.idPath.split("-");
const namePathSplitResult = temp.namePath.split("-");
for (let i = 0; i < props.fields.length; i++) {
const key = props.fields[i];
temp[key] = idPathSplitResult[i] || "";
temp[`${key}Name`] = namePathSplitResult[i] || "";
}
return temp;
});
} else {
return unref(options).map((option) => {
const temp = { ...option };
const fields = props.fields;
let name = "";
let id2 = "";
let pid = "";
let idPath = "";
let namePath = "";
for (let i = 0; i < fields.length; i++) {
const key = fields[i];
if (option[key]) {
name = `${option[`${key}Name`]}`;
id2 = `${option[key]}`;
idPath = idPath ? `${idPath}-${option[key]}` : `${option[key]}`;
namePath = namePath ? `${namePath}-${option[`${key}Name`]}` : `${option[`${key}Name`]}`;
}
}
const idPathSplitResult = idPath.split("-");
pid = idPathSplitResult[idPathSplitResult.length - 1 - 1] ? idPathSplitResult[idPathSplitResult.length - 1 - 1] : "";
return {
...temp,
name,
id: id2,
pid,
idPath,
namePath
};
});
}
};
const handleConfirm = async () => {
visible.value = true;
const result = unref(cascadeProRef)?.selectResultRef?.options || [];
selectValue.value = handleSelectResult(result);
selectDefaultValue.value = unref(selectValue);
selectOptions.value = handleFormItemResult(unref(selectValue));
await nextTick();
emit("change", unref(selectDefaultValue));
handleCancel();
};
watch(() => props.value, (_new, _old) => {
if (_new && JSON.stringify(_new) !== JSON.stringify(_old)) {
selectValue.value = handleSelectResult(props.value, "outer");
selectDefaultValue.value = unref(selectValue);
selectOptions.value = handleFormItemResult(unref(selectValue));
emit("change", unref(selectDefaultValue));
}
}, { immediate: true, deep: true });
const getBindValue = computed(() => {
return {
...props,
...attrs,
id,
value: selectDefaultValue
};
});
const handleCancel = () => {
visible.value = false;
};
const handleClick = () => {
if (attrs.disabled)
return;
visible.value = true;
};
const handleClear = (option) => {
selectValue.value = unref(selectValue).filter((_option) => _option.idPath !== option.idPath);
selectDefaultValue.value = unref(selectDefaultValue).filter((_option) => _option.idPath !== option.idPath);
selectOptions.value = unref(selectOptions).filter((_option) => _option.idPath !== option.idPath);
};
return {
tavI18n,
cascadeProRef,
getBindValue,
visible,
selectValue,
selectOptions,
handleConfirm,
handleCancel,
handleClick,
handleClear
};
}
});
const _hoisted_1 = { class: "ant-select-selection-overflow" };
const _hoisted_2 = { class: "ant-select-selection-item" };
const _hoisted_3 = { class: "ant-select-selection-item-content" };
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
const _component_CascadePro = resolveComponent("CascadePro");
const _component_Button = resolveComponent("Button");
const _component_Modal = resolveComponent("Modal");
return openBlock(), createElementBlock("div", null, [
createVNode(_component_Modal, {
title: _ctx.getBindValue.title,
visible: _ctx.visible,
width: 800,
closable: "",
"destroy-on-close": "",
"wrap-class-name": "ta-cascade-pro-modal",
onCancel: _ctx.handleCancel
}, {
footer: withCtx(() => [
createVNode(_component_Button, {
type: "primary",
onClick: _ctx.handleConfirm
}, {
default: withCtx(() => [
createTextVNode(toDisplayString(_ctx.tavI18n("Tav.common.okText")), 1)
]),
_: 1
}, 8, ["onClick"]),
createVNode(_component_Button, { onClick: _ctx.handleCancel }, {
default: withCtx(() => [
createTextVNode(toDisplayString(_ctx.tavI18n("Tav.common.cancelText")), 1)
]),
_: 1
}, 8, ["onClick"])
]),
default: withCtx(() => [
createVNode(_component_CascadePro, mergeProps({ ref: "cascadeProRef" }, _ctx.getBindValue), null, 16)
]),
_: 1
}, 8, ["title", "visible", "onCancel"]),
createElementVNode("div", {
class: normalizeClass([
"ta-cascade-pro-select",
_ctx.selectOptions.length ? "ant-select-selector ant-select-multiple" : "ant-input"
]),
style: normalizeStyle(!_ctx.getBindValue.showPlaceholder ? { border: "none", paddingLeft: "0" } : {})
}, [
createElementVNode("div", _hoisted_1, [
_ctx.selectOptions.length > 0 ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(_ctx.selectOptions, (option) => {
return openBlock(), createElementBlock("div", {
key: option.idPath,
class: "ant-select-selection-overflow-item"
}, [
createElementVNode("div", _hoisted_2, [
createElementVNode("div", _hoisted_3, toDisplayString(option.namePath), 1),
createCommentVNode(' <Icon\n icon="ant-design:close-outlined"\n :size="12"\n class="ant-select-item-option-close-icon"\n @click.stop="() => handleClear(option)"\n /> ')
])
]);
}), 128)) : createCommentVNode("v-if", true),
!_ctx.getBindValue.showPlaceholder ? (openBlock(), createBlock(_component_Button, {
key: 1,
"pre-icon": "ant-design:plus-outlined",
style: { "min-width": "auto", "height": "24px", "margin": "2px 4px 2px 0px" },
disabled: _ctx.$attrs.disabled,
onClick: _ctx.handleClick
}, null, 8, ["disabled", "onClick"])) : (openBlock(), createElementBlock("span", {
key: 2,
class: "ant-select-selection-placeholder",
onClick: _cache[0] || (_cache[0] = (...args) => _ctx.handleClick && _ctx.handleClick(...args))
}, toDisplayString(_ctx.getBindValue.placeholder), 1))
])
], 6)
]);
}
var CascadeProSelect = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "/home/runner/work/tav-ui/tav-ui/packages/components/cascade-pro/src/cascade-pro-select.vue"]]);
export { CascadeProSelect as default };
//# sourceMappingURL=cascade-pro-select2.mjs.map